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}