Falcon Space. Working with trees (hierarchy)

Description of the Tree component

Example of the Tree component

The component allows you to display hierarchical structures. There is a possibility to perform various actions when you select a specific item. 

You can also add an element, delete an element, and rename an element. 

Tree setting

Use a snippet on the page: 

<div class="as-tree" data-code="catalog" data-itemid="123"></div>

An element is created in Components/Trees (as_trees). 

  • name-name 
  • code-code (used in the snippet)
  • roles-comma-separated roles set access to tree elements (applies to all operations with the tree at once-get, add, rename, delete). 

Next, implement stored procedures: 

  • GetItems-get elements
  • Rename-rename the element
  • Delete-delete element
  • Create-create element

GetItems procedure

ALTER procedure [dbo].[tree_example_getItems]
@parameters DictionaryParameter READONLY,
@username nvarchar(128 )='',
@itemID nvarchar(128)=''
as
begin 

-- SELECT 1
select 1 Result, '' Msg, 
1 CanRename, 1 CanAdd, 1 canDelete, 
'' PlusIcon, '' MinusIcon,  1 ShowIcon, 1 ShowTags,
'0' ParentIDRootValue,
'' EmptyIcon, 
'' NodeIcon

-- SELECT 2
select id Id, 
name title,
isnull(parentID, 0) ParentID, 
ord Ord,
'' Icon, -- fa fa-cube
'form' [Type],  --//form, redirect, refreshContainer
'111    33333 ' Value,
--'refreshContainer' [Type],
--'body' Value,
iif(id=1009, 1, 0) Expanded,
iif(id=1009, 1, 0) Selected,
'fa fa-stop' selectedIcon,
'#555' color,
'#eee'backColor,
'#123' href,
1 selectable, 
'1222|23' info
from as_cat_categories    

end

At the entrance: 

  • @parameters  - URL parameters (here langID is the current language)
  • @username - current user
  • @itemID - itemID, passed to the procedure

At the exit: 

SELECT 1: The basic configuration of the tree

  • Result,
  • Msg, 
  • CanRename - if 1, then you will be able to edit the name. 
  • CanAdd - if 1, then you will be able to add it.
  • CanDelete - if 1, then the delete function is available, 
  • PlusIcon, MinusIcon-ability to set custom icons for opening and collapsing elements (Font Awesome). 
  • ShowIcon - if 1, icons are displayed for
  • elements
  • ShowTags - if 1, the info fields in the elements will be displayed as tags opposite each element. 
  • ParentIDRootValue-sets the value that defines the parentID for the top level (usually it is either‘ or ‘ 0’).& nbsp;
  • EmptyIcon-setting icons for empty elements
  • NodeIcon-setting a single icon for all elements

SELECT 2: data for tree elements

  • ID-element ID(can be a string)
  • title - name of the tree element
  • parentID-reference to the parent (can be a string)
  • ord-order
  • icon-element icon
  • type - type of action when selecting an element (see below).& nbsp;
  • value-value (used for the action)
  • expanded - if 1, the element will be revealed at boot
  • selected - if 1, the element will be chosen at boot
  • selectedIcon - icon of the selected element.
  • color - hex color of the font
  • backColor - hex background color
  • a selectable - if 1, the element can be selected
  • info - tags listed in the sign |, e.g., "123|Long"

Action types (type column):

  •  form. Shows the modal form. The Value must contain the layout of the modal form call button, for example:  'Button' Value,
  • redirect - redirect to another page with the page address in Value.
  • refreshContainer - updates part of the page when selecting a category. In Value, there is a container selector where you need to update components. 

Rename procedure

create PROCEDURE [dbo].[tree_example_renameItem]
@id nvarchar(128),
@name nvarchar(128),
@username nvarchar(32)
AS
BEGIN

update as_cat_categories
set name = @name
where id = @id

-- SELECT 1
Select 1 Result, '' Msg

END

At the enter: 

  • @id  - ID of the element, for which we change name
  • @name - new name
  • @username - current user.

At the exit: 

SELECT 1: Result, Msg

Procedure Delete

ALTER PROCEDURE [dbo].[tree_catalog_deleteItem]
@id nvarchar(128),
@username nvarchar(32)
AS
BEGIN

delete from  as_cat_categories where id = @id

-- SELECT 1
Select 1 Result, '' Msg

END

At the enter: 

  • @id  - ID of the element, which we'll delete
  • @username - current user.


At the exit: 

SELECT 1: Msg, Result

Procedure Create

create PROCEDURE [dbo].[tree_example_createItem]
@parameters DictionaryParameter READONLY,
@parentID nvarchar(128),
@name nvarchar(128),
@itemID nvarchar(128),
@username nvarchar(32)
AS
BEGIN

declare @catParentID int 
set @catParentID = try_cast(@parentID as int)
if(@catParentID=0) set @catParentID= null

insert into as_cat_categories(name, parentID, ord, code)
values(@name, 
@catParentID,
(select max(ord) + 1 from as_cat_categories), 
@name
)

-- SELECT 1
Select 1 Result, '' Msg, Scope_identity() [NewID]

END

At the enter: 

  • @parameters - URL parameters (here langID - current language)
  • @parentID - which element should I add a new element to
  • @name  - the name of new element
  • @itemID - itemID, which is passed to the tree snippet
  • @username - current user

At the exit: 

SELECT 1: Msg, Result, NewID (ID of the element, which was created)

HOWTO by tree

How do I call a certain form by clicking on a tree element? 

In the tree elements in GetItems.SELECT 2 specify Type=”form” and write the layout of the modal form call button in Value.

How do I go to a specific address when I go to a tree element? 

In the tree elements in GetItems.SELECT 2 specify Type=”redirect” and enter the transition address in Value.

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

SQL-tool for creating personal accounts on the site

The essence of the approach and the history of the creation of Falcon Space
Web platform for creating personal accounts

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

MS SQL web applications. Affiliate program for developers and web studios

You can develop on your own or collaborate with us on Falcon Space web development using only SQL and HTML.
See examples with SQL code
Platform documentation
Working on MS SQL Server
Note