TreeSelect

#TreeSelect

A TreeSelect object is an object that is similar to a TreeView object and is an element that provides a hierarchical view of information on a form. The object consists of the main elements and the child elements that may be under them. With this object, a list in the breakdown structure can be shown to the user in the pop-up panel and made to make a selection.

While the active screen is a form in the authoring interface, the Toolbox panel lists form objects. The object is added to the form by drag/drop from the toolbox panel.

Clicking on the object displays the "General" and "Events" tabs in the Property Viewer panel, and the properties of the object can be viewed and edited. The inheritance scheme by which the properties of the object are transferred is as follows;

General

Design

'Name' - The name of the object to be used by the system. Inside another object and on the code side, the object is accessed by the value written in the namespace.

Caption

'Title' - The part where the label text of the object is edited.

'Position' - The part of the object label that regulates whether it is positioned on the left, right or above the object.

>Choices Available : Left, Right, Top, Bottom

'Width' - This is where the width of the label field is set.

'Height' - This is the part where the height of the label field is set.

'Font' - The part of the text in the label area where the font, font, font size and color are set.

'Ellipsis' - The portion where the label text is set to appear for the part of the text that does not fit, whether the ellipsis (...) appears.

'Visible' - The part where the label field is set to be hidden or visible.

'Show Colon' - Colon next to label text (:) is the part where the expression is set to appear or not.

'Horizontal Align' - Label text; This is the portion where right-just, left-just, or center-justify settings are performed.

>Choices Can Be Made: Left, Center, Right

'Vertical Align' - Label text; This is the portion where the Justify, Snap Down, or Center settings are performed.

>Choices Available : Top, Middle, Bottom

'Mark Char' - To make the object stand out, enter *, ! is the area where characters such as can be entered.

'Mark Position' - The part where the character designated as the mark character is set to be shown at the beginning or end of the label text.

>Choices Can Be Made: AtFirst, AtLast

Datasource

'Type' - The choice of what type of data to add to the object is made from this field. The Type field lists two options, "Dynamic" and "Static". Depending on the type selected, the properties that appear in the data source section will vary.

When "Dynamic" is selected as an option; This means that data in the object will be loaded dynamically from a data source. When the Dynamic option is selected, the Datasource and Run at Server properties will be visible in the Datasource area.

When "Static" is selected as an option, it means that a manual element will be added to the object, and the Items property will be visible in the data source field.

NOTE :::note

Starting in this section, selecting dynamic in the type field on the object will describe object usage. You can open the relevant section to view the properties in static use.

:::

<details> <summary>Click here to view dynamic usage details!</summary> <div>

'DataSource' - The field in the object that will be used to be able to list values from a data source. The data source definition that is added to the DataSource section of the project in Solution Explorer and that compiles successfully becomes selectable from the DataSource portion of the object.

'RunAtServer' - This option determines whether the query connecting to the object is run from the server or the client.

If this option is enabled, when clicking on the form in the web interface, the query is run on the server side before the form is opened, and when the form is opened, the query result is loaded into the object. When the option is made inactive, when the form is clicked in the web interface, the object starts to load the result values of the query after the form is opened.

The wait time for the query result to load takes effect at the time the form is opened with this feature active, and at the time the data is loaded into the object after the form is opened quickly when the feature is passive.

'Value Expression' - This field is visible when a data source definition is selected from the Data Source section. All columns returned from the selected data source are listed in this field. When the user makes a selection from the interface, it is determined in this field which column value the registration field of the selection will be.

For example, a query that returns a list of users is bound to the object. Let the ID (Username), FIRSTNAME (Name), EMAIL (Mail Address) columns return from the query. Because the purpose of this object is user choice, the ID column returned from the query must be selected in the Value Expression section because the unique record value of the selected user is contained in the ID column.

'Display Expression' - This field is visible when a data source definition is selected from the Data Source section. All columns returned from the selected data source are listed in this field. When the user selects from the interface, this field determines which query column the expression that will appear in the object will come from.

For example, a query that returns a list of users is bound to the object. Let the ID (Username), FIRSTNAME (First Name), LASTNAME (Last Name), EMAIL (Mail Address) columns return from the query. Since the purpose of this object is user choice, the values returned from the FIRSTNAME and LASTNAME columns of the selected user will be desired to be displayed in the object. Therefore, these column values are selected in the Visible Expression section.

The column or columns selected from the 'Display Format' - Appearance Expression field are automatically added to this field as well. The area used to specify the appearance format for element text to list in the object. In order for the elements to be displayed in a desired format, the corresponding format structure can be specified in this field. And after object selection, the value to be displayed in the object can be made to appear in the web interface to the end users in the specified format.

The types of formats that can be used in formatting can be accessed from the link (https://shopify.github.io/liquid/) in the information message that appears when the field is focused and the desired format structure can be applied to the relevant column in the View Format field.

'Hierarcy Type' - The area where when the data source is defined to the object, it is determined which type of data in the data source will be broken down.

For example, if a REST query is defined to the object and each of the items listed in the query result contains id and parentid keys that indicate which id it is bound to, the object can select Parent By in the Hierarcy Type field; If the items in the REST question result contain a child element directly, Children By should be selected.

If the object is defined in a SQL query and returns results that indicate the relationship of elements such as ID, PARENTID, and TEXT to each other in the query, Parent By can be selected in the field.

If the SQL Data Source content is as follows, Parent By should be selected.***

ID	PARENTID	TEXT
1	0	1. Main Item
2nd	1	1.1 Child Title
3rd	1	1.2 Child Subtitle
4th	3rd	1.2.1 Child Subheading
5th	0	2. Main Element
6th	5th	2.1 Child Title
7th	6th	2.1.1 Child Subheading

If the REST Data Source content is as follows, Parent By should be selected.***

''json

{ "key": "1", "icon": null, "text": "Item1", "parentKey": null, "selected": true, "disabled": false, "expand": false }, { "key": "2", "icon": null, "text": "Item2", "parentKey": "1", "selected": false, "disabled": false, "expand": false }, { "key": "3", "icon": null, "text": "Item3", "parentKey": null, "selected": false, "disabled": false, "expand": false }

If the REST Data Source content is as follows, Children By should be selected.***

''json

{
    "id": "1",
    "icon": null,
    "text": "Item1",
    "childrenKey": [
        {
            "id": "2",
            "icon": null,
            "text": "Item2",
            "childrenKey": [],
            "selected": false,
            "disabled": false,
            "expand": false
        },
        {
            "id": "3",
            "icon": null,
            "text": "Item3",
            "childrenKey": [],
            "selected": false,
            "disabled": false,
            "expand": false
        }
    ],
    "selected": false,
    "disabled": false,
    "expand": false
}

>Choices Can Be Made: Parent By, Children By

'Not Recursive' - The field in the object data source where the selected query result is selected to be recursive. If the query linking to the object is not listed as breakdown, the feature is activated. When activated, there is no breakdown in the query defined in the object, but it is asked to convert it to breakdown.

'Parent Key' - This is the field that appears when Parent By is selected in the Hierarcy Type field. When the data coming through the DataSource does not come recursively, it must be manipulated and a nested breakdown structure must be created in order to reflect the incoming data properly on the object. In this data, which comes with the selection of Parent By in the Hierarcy Type field, it is stated that the placement will occur by finding the element (parent) to which the current element is connected and placing it under it.

For example, if the result is such as the json example containing the 1 number child element above, Parent By can be selected in the Hierarchy Type field and the parentkey property can be selected in the Parent Key field. In the SQL query example, Parent By can be selected in the Hierarchy Type field and the PARENTID column can be selected in the Parent Key field.

'Children Key' - This is the field that appears when Children By is selected in the Hierarcy Type field. When the data coming through the DataSource does not come recursively, it must be manipulated and a nested breakdown structure must be created in order to reflect the incoming data properly on the object. In this data, which comes with the selection of Children By in the Hierarcy Type field, it is stated that the placement will occur by finding the children under the current element and placing them under it.

For example, if the result is such as the json example where the nested elements number 2 above are listed, it is possible to select Children By in the Hierarchy Type field and select the childrenkey property in the Children Key field.

</div> </details>

NOTE :::note

Starting in this section, selecting static in the type field on the object will describe the use of the object. Dynamic You can open the relevant section to view the features in use.

:::

<details> <summary>Click to view static usage details!</summary> <div>

'Items' - When the object wants to list elements that were added manually at the time of development, not records from a data source, the element identification is done from this field. It is the part where the list elements are determined. From this area, a new element can be added to the object, an existing element can be deleted, or it can be edited. Clicking in the Elements field opens the add elements window. By clicking the Add button, new element items are created for the object.

'Name' - The key value to be given to the element is written in this field, it must be different from the values defined in the name fields in other attached elements, if the same value is typed, the addition will not be done.

'Title' - The name to be given to the item is written in this field.

'Selectable' - If the element is desired to be selected on the form, the field must be activated. If it is not selected, the item will not be selected in the web interface.

'Children Items' - If there is another element that is desired to be under the item, it can be added by clicking on the three dots in Children Items. In the window that opens, the features that come when the add button is pressed are the same as the previous window, and by clicking the "Save" button, the child elements are saved under the main element.

</div> </details>

Appearance

'Visible' - This is the part where the object is hidden and made visible. When this field is active, the object is visible on the form. When the field is made passive, the object becomes invisible.

'Client Visible' - When the object is not visible when the form is first opened, when it is desired to make the object visible, to make the object visible when a certain condition is met, this field is made passive so that the object is invisible on the client side. When the condition set by the code or the Rules Manager is met, the object can be made visible again. When server visibility is inactive, the client cannot intervene, but the server can intervene when client visibility is inactive.

'Enabled' - The active mode of the object is set from this field. When this feature is active, data entry can be provided to the object and the object can be edited. When the feature is passive, the object is in non-editable mode and appears passive.

'Client Enabled' - When the form is first opened, the object is not active, when a certain condition is met, etc., this field is made inactive so that the object is not active on the client side. Once the condition set by the code or the Rules Manager is met, the object can be activated again. When server activity is inactive, the client cannot intervene, but the server can intervene when client activity is inactive.

'Background Color' - The area used to give the object a background color.

'Title' - Hovering over the object with the cursor while the form is open in the interface, the text typed in this field is shown as a hint. It is a feature used to direct the end user when detailed information about the object is desired.

'ClassName' - The field in which the object visibility can be changed by defining a class written in the CSS file of the form.

'Allow Clear' - The property used to clear the selection made within the object.

'Show Search' - This is the feature to be activated if you want to list the result by searching in addition to making a selection within the object.

'Multiple' - This is the feature that is activated if it is desired to make more than one selection within the object.

'Checkable' - A feature that allows the selection process to be performed by showing the selection box at the beginning of each item and clicking on the box instead of selecting the item in the object.

'Default Expand All' - This is the feature that is activated if the elements in the object are broken, if all breakdowns are wanted to be open.

Behavior

'ReadOnly' - This is where the object is set to be in edit mode. When this feature is enabled, the object does not allow data entry, it is in read-only mode. The property must be passive for data entry to be allowed into the object.

'Tab Index' - By entering numeric values in this field, it is determined in which order the tab button is pressed to focus between the form objects. When filling out the form, instead of clicking the cursor on the object where the data is to be entered, the tab button is pressed to focus directly on the indexed objects in a certain order. This is a feature that increases the speed of filling out forms.

'Required' - The field in which it is determined whether data entry is required on the object. When this feature is activated, it is not possible to advance/save the form without entering data into the object.

'Text Separator' - This field is the part where the parser expression placed between the values is determined when the text expressions of the object elements are wanted to be accessed at the time of coding. For example, if you type a comma (,) character in the Text Seperator field and two items with TreeSelectText1 and TreeSelectText2 in the object are selected in the object, the data will be as TreeSelectText1,TreeSelectText2.

'Value Separator' - This field is the part where the parser expression placed between the values is determined when the value expressions of the object elements are wanted to be accessed at the time of coding. For example, if the comma (,) character is typed in the Value Seperator field and two items with TreeSelectValue1 and TreeSelectValue2 in the object are selected in the object, the data will be as TreeSelectValue1,TreeSelectValue2.

Data Definition Language

'Field Name' - The field in the database of the system that determines the name of the column it will create for the object. In the "Name" section, the object can be given another name and the column name to be created for the object in the database table can be created as a different name.

'Allow Null' - This section indicates whether the database field to be created for the object will allow null values.

Events

The events owned by the object are located in the "Events" tab in the Property Viewer panel. Each event is triggered at different runtime moments, performing its own unique operations. Code written by the developer to these events is also executed at the time the corresponding event is triggered.

When the events in the "Client" field are double-clicked, the screen is directed to the form code editor section called "Formedi.ts" where TypeScript coding can be done and the method block for the clicked event is automatically created.

When the events in the "Server" field are double-clicked, the screen is directed to the form code editor section called "Formadı.cs" where C# coding can be done and the method block for the clicked event is automatically created.

The developer can construct any code block within these methods. Next to the event whose method is created on the code side by clicking from the Events tab, the method name information is automatically generated and the relationship between the event and the method is specified.