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.