ContextMenu
DataGrid and TreeView objects are an object that enables right-click operation by opening the context menu with the right-click operation of the mouse, defining customized tasks such as Open A Process, Open A Form, etc. in the menu. When the object is added to a form in the authoring environment, it does not appear in the web interface, but is defined and used in the DataGrid or TreeView objects of the object.
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
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.
'ItemsExpr' - Specifies which data field contains nested items.
'Parent Key' - Specifies the identifier of a parent item in the selected data source.
</div>
</details>
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.
'Key' - The key value to be given to the element is written in this field, it must be different from the values defined in the key fields in other attached elements, if the same value is typed, the addition will not be done.
'Text' - The name to be given to the element is written in this field.
'Title' - The name that will be displayed when the mouse pointer hits the item is typed in this field.
'Icon' - This field should be selected if the element is desired to have an icon.
'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 the 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.
'Action Buttons' - This is the area to be used when you want to perform Open A Form, Open A Process, Create A Form, Start A Process, Open A Selection Form, Execute Custom Action operations by adding an action button in the ContextMenu.
- 'Create A Form' - A type of button that can be used by the end user to create a new form in the system defined on the button when clicked.
<details>
<summary>Click for the properties of the Create A Form button</summary>
<div>
Button Properties
| Feature | Description |
|---|---|
| Name | Action is the area where the name of the button is defined. The field must be different from the values defined in the name fields in other attached elements, and if the same value is typed, the addition will not be done. |
| Text | It is the area where the title is defined where the action button will be displayed on the web interface. |
| Title | It is the area where the information to be displayed when hovered over the Action button in the web interface is defined. |
| Icon | If the Action button is desired to be displayed with the icon, it is the area where the icon is selected. |
| Visible | Action is the option where the visibility of the button on the web interface is determined. |
Action Type Properties
| Feature | Description |
|---|---|
| Project Name | It is the area where the name (Name) of the project where the form requested to be opened with the Action button is written. |
| Form Name | It is the field where the desired form name (Name) is written to be opened with the Action button |
| Default View | It is the area where the form to be opened with the action button is defined by default with which view (such as default, view1, accounting, etc.) is defined. |
| Data Entry Form | If the field is active, when the form is opened with the Action button, the data is saved in the recognition when the operations performed on the form are saved, but it is not added to the object. |
| Parameters | By sending a parameter to the form to be opened when the action button is clicked with the values to be written in the field, the sent parameters can be met with the ResponseParameters method in the opened form and the operation can be performed according to the parameter. |
| Panel Size | It is the area where the size of the form to be opened with the Action button is determined, 1-2 or 3 values can be selected. The selected values will be effective in the Panel selection in the Show On property, and the value entered in the Panel Size will not affect when Modal or Drawer is selected. |
| Show On | It is used to determine which type of form to be opened with the action button will be opened.<br/>Panel: The form must be selected if the panel is desired to be opened in view. It is the default opening type, the panel size can be changed by selecting 1-2-3 values in the Panel Size field.<br/>Modal: It should be selected if the form is desired to be opened in the center of the screen, maximizing the screen. The selection made in the Panel Size field does not affect the opening with modal.<br/>Drawer: The form should be selected if you want to show the panel by sliding from the right of the screen. The form that opens is shown at the top of the current page. The selection made in the Panel Size area does not affect opening with the drawer. |
</div>
</details>
- 'Open A Form' - A type of button to use if you want to display the current form in the system. The button allows only the form to be displayed, if you want to show information about the flow history, the Open A Process button should be used.
<details>
<summary>Click for the features of the Open A Form button</summary>
<div>
Button Properties
| Feature | Description |
|---|---|
| Name | Action is the area where the name of the button is defined. The field must be different from the values defined in the name fields in other attached elements, and if the same value is typed, the addition will not be done. |
| Text | It is the area where the title is defined where the action button will be displayed on the web interface. |
| Title | It is the area where the information to be displayed when hovered over the Action button in the web interface is defined. |
| Icon | If the Action button is desired to be displayed with the icon, it is the area where the icon is selected. |
| Visible | Action is the option where the visibility of the button on the web interface is determined. |
Action Type Properties
| Feature | Description |
|---|---|
| Document Id | The global id of the form requested to be opened with the action button is the area where the information is written. |
| Default View | It is the area where the form to be opened with the action button is defined by default with which view (such as default, view1, accounting, etc.) is defined. |
| Editable | It is the area where it is determined whether the change process will be made in the form requested to be opened with the action button. If a change is desired to be made to the form, the field must be activated. |
| Parameters | By sending a parameter to the form to be opened when the action button is clicked with the values to be written in the field, the sent parameters can be met with the ResponseParameters method in the opened form and the operation can be performed according to the parameter. |
| Panel Size | It is the area where the size of the form to be opened with the Action button is determined, 1-2 or 3 values can be selected. The selected values will be effective in the Panel selection in the Show On property, and the value entered in the Panel Size will not affect when Modal or Drawer is selected. |
| Show On | It is used to determine which type of form to be opened with the action button will be opened.<br/>Panel: The form must be selected if the panel is desired to be opened in view. It is the default opening type, the panel size can be changed by selecting 1-2-3 values in the Panel Size field.<br/>Modal: It should be selected if the form is desired to be opened in the center of the screen, maximizing the screen. The selection made in the Panel Size field does not affect the opening with modal.<br/>Drawer: The form should be selected if you want to show the panel by sliding from the right of the screen. The form that opens is shown at the top of the current page. The selection made in the Panel Size area does not affect opening with the drawer. |
</div>
</details>
- 'Open A Process' - A type of button to use if desired to display the current process in the system. Information such as flow history can be accessed with the button. If only the form is desired to be displayed, the Open A Form type button should be used.
<details>
<summary>Click for the properties of the Open A Process button</summary>
<div>
Button Properties
| Feature | Description |
|---|---|
| Name | Action is the area where the name of the button is defined. The field must be different from the values defined in the name fields in other attached elements, and if the same value is typed, the addition will not be done. |
| Text | It is the area where the title is defined where the action button will be displayed on the web interface. |
| Title | It is the area where the information to be displayed when hovered over the Action button in the web interface is defined. |
| Icon | If the Action button is desired to be displayed with the icon, it is the area where the icon is selected. |
| Visible | Action is the option where the visibility of the button on the web interface is determined. |
Action Type Properties
| Feature | Description |
|---|---|
| Process Id | The process number requested to be opened with the action button is the field where the information is written. |
| Process Request Id | It is the area where the Action button is written to determine with which request number the process to be opened will be opened. The PROCESSREQUEST table uses the PROCESSREQUESTID column data of the relevant process number. If the table does not recognize a RequestId that does not contain the process number, the process cannot be displayed. |
| Parameters | By sending a parameter to the form to be opened when the action button is clicked with the values to be written in the field, the sent parameters can be met with the ResponseParameters method in the opened form and the operation can be performed according to the parameter. |
| Panel Size | It is the area where the size of the form to be opened with the Action button is determined, 1-2 or 3 values can be selected. The selected values will be effective in the Panel selection in the Show On property, and the value entered in the Panel Size will not affect when Modal or Drawer is selected. |
| Show On | It is used to determine which type of form to be opened with the action button will be opened.<br/>Panel: The form must be selected if the panel is desired to be opened in view. It is the default opening type, the panel size can be changed by selecting 1-2-3 values in the Panel Size field.<br/>Modal: It should be selected if the form is desired to be opened in the center of the screen, maximizing the screen. The selection made in the Panel Size field does not affect the opening with modal.<br/>Drawer: The form should be selected if you want to show the panel by sliding from the right of the screen. The form that opens is shown at the top of the current page. The selection made in the Panel Size area does not affect opening with the drawer. |
</div>
</details>
- 'Start A Process' - A type of button that can be used by the end user to create a new process in the system defined on the button when clicked.
<details>
<summary>Click for the properties of the Start A Process button</summary>
<div>
Button Properties
| Feature | Description |
|---|---|
| Name | Action is the area where the name of the button is defined. The field must be different from the values defined in the name fields in other attached elements, and if the same value is typed, the addition will not be done. |
| Text | It is the area where the title is defined where the action button will be displayed on the web interface. |
| Title | It is the area where the information to be displayed when hovered over the Action button in the web interface is defined. |
| Icon | If the Action button is desired to be displayed with the icon, it is the area where the icon is selected. |
| Visible | Action is the option where the visibility of the button on the web interface is determined. |
Action Type Properties
| Feature | Description |
|---|---|
| Project Name | It is the field where the name (Name) of the project to be started with the Action button is written. |
| Flow Name | The project to be started with the action button is the field where the flow name (Name) is typed with which the flow is wanted. |
| Parameters | By sending a parameter to the form to be opened when the action button is clicked with the values to be written in the field, the sent parameters can be met with the ResponseParameters method in the opened form and the operation can be performed according to the parameter. |
| Panel Size | It is the area where the size of the form to be opened with the Action button is determined, 1-2 or 3 values can be selected. The selected values will be effective in the Panel selection in the Show On property, and the value entered in the Panel Size will not affect when Modal or Drawer is selected. |
| Show On | It is used to determine which type of form to be opened with the action button will be opened.<br/>Panel: The form must be selected if the panel is desired to be opened in view. It is the default opening type, the panel size can be changed by selecting 1-2-3 values in the Panel Size field.<br/>Modal: It should be selected if the form is desired to be opened in the center of the screen, maximizing the screen. The selection made in the Panel Size field does not affect the opening with modal.<br/>Drawer: The form should be selected if you want to show the panel by sliding from the right of the screen. The form that opens is shown at the top of the current page. The selection made in the Panel Size area does not affect opening with the drawer. |
</div>
</details>
- 'Open A Selection Form' - A type of button that, when clicked, can be operated by the end user by opening a selection form defined on the data source defined on the button.
<details>
<summary>Click for the features of the Open A Selection Form button</summary>
<div>
Button Properties
| Feature | Description |
|---|---|
| Name | Action is the area where the name of the button is defined. The field must be different from the values defined in the name fields in other attached elements, and if the same value is typed, the addition will not be done. |
| Text | It is the area where the title is defined where the action button will be displayed on the web interface. |
| Title | It is the area where the information to be displayed when hovered over the Action button in the web interface is defined. |
| Icon | If the Action button is desired to be displayed with the icon, it is the area where the icon is selected. |
| Visible | Action is the option where the visibility of the button on the web interface is determined. |
Ok Button Properties
| Feature | Description |
|---|---|
| Text | It is the area where the desired expression is defined next to the OK button in the Selection form panel. |
| Title | Selection is the area in the form panel where the information to be displayed is defined when the OK button is hovered over with the mouse pointer. |
| Icon | In the selection form panel, OK is the area where the icon of the button is specified. |
Data Source
| Feature | Description |
|---|---|
| DataSource | Selection is the field from which the data source in the project that contains the data to display in the form is selected. |
| Columns | The DataSource field is the field where columns from the data source are generated, relative to the data source selected in the field. By clicking on the Generate Columns boton in the field, columns suitable for column types will be produced in the defined data source. Marking one of the generated columns as a primary key prevents all of them from being selected when rows with the same elements are found in the selection process. |
| Column Map | The area where the columns of the object and the columns produced in the Columns area are mapped. When selecting columns of objects, the appropriate column type in the Columns field will be selectable. For example, if the object has a column type of text, the selection list lists columns of type text. Other types of columns are not listed. |
Columns Settings
| Feature | Description |
|---|---|
| Enabled | This is the property that must be enabled to use the Orderable and Resizeable properties under Columns Settings. |
| Orderable | When activated, if it is desired to change the order of the columns in the selection form within themselves, the feature should be activated. |
| Resizeable | When activated, selection is a feature that allows the column on the form to be expanded or contracted to the right or left. |
Filtering Settings
| Feature | Description |
|---|---|
| Enabled | By activating the field, the filtering feature is available in each column heading in the selection form. Filter types may vary according to column type. |
Paging Settings
| Feature | Description |
|---|---|
| Enabled | Selection is the property that sets whether the data listed in the form is displayed as pages. When this feature is disabled, how many records are in the connected data source are listed below. When the feature is activated, the data is displayed in the form of pages. |
| Current Page | Selection is the property used to ensure that when the form is opened in the web interface, it opens from the page specified here. |
| Paging Size | The number of records per page is the feature for which the display settings are made. Defaults to 10, 20, 30, 40. How many rows you want to show on a page can be set from this field. |
Seaching Settings
| Feature | Description |
|---|---|
| Enabled | When the feature is activated, a search bar appears above the selection form structure. And the value typed into this search bar is searched in all columns of the form, listing the matching rows. |
Selection Settings
| Feature | Description |
|---|---|
| Enabled | This feature must be activated in order to select rows from within the table rows in the selection form. |
| Mode | The area from which to select the selection mode. It includes "Single" and "Multiple" options. "Single" mode should be selected if only a single row is desired to be selected in the elements in the selection form, and "Multiple" mode should be selected if multiple rows are desired to be selected. |
| Show Select All | When this feature is activated, the select all button is active next to the column headings. If multiple is selected in the Mode field, the Select all checkbox appears in the selection form. Clicking the Select All button makes all rows on the page or on all pages selected according to the selection made in the Select All Mode property. Clicking the button again deselects the rows. |
| Select All Mode | Works in conjunction with the Show Select All property. If page is selected, only the items on the displayed page are selected by selecting with Select All, and if allPage is selected, the selection in Select All selects items on all pages. |
| Show CheckBoxes Mode | Selection determines when checkboxes are displayed in the selection column on the form and in the row selection process. The selection made is valid when multiple is selected in the mode field.<br/>always: The selection column that contains all the checkboxes is always visible. The user can select a row by clicking the check box or the cell that contains the check box, but not by clicking the row itself.<br/>none: The selection column that contains all the checkboxes is hidden. Users can select<br/> lines with keyboard shortcuts or a long tap (click and hold).onClick: The selection column is always shown. Checkboxes appear when the user clicks the column or when two or more rows are selected. When row selection is canceled, the check boxes disappear.<br/>onLongTap: The selection column containing all the checkboxes appears and disappears when long tapped (click and hold) the rows. |
Sorting Settings
| Feature | Description |
|---|---|
| Enabled | In the selection form, the feature must be activated in order to sort in the table columns. |
| All Sorting Columns | When active, it causes the sorting in the column to change the order of the other rows. |
| Mode | Specifies the sorting mode.<br/>none: Rows cannot<br/>be sorted by single: Rows can only be sorted by the values of a single column.<br/>multple: Rows can be sorted by the values of several columns. |
Action Type Properties
| Feature | Description |
|---|---|
| Panel Size | It is the area where the size of the form to be opened with the Action button is determined, 1-2 or 3 values can be selected. The selected values will be effective in the Panel selection in the Show On property, and the value entered in the Panel Size will not affect when Modal or Drawer is selected. |
| Show On | It is used to determine which type of form to be opened with the action button will be opened.<br/>Panel: The form must be selected if the panel is desired to be opened in view. It is the default opening type, the panel size can be changed by selecting 1-2-3 values in the Panel Size field.<br/>Modal: It should be selected if the form is desired to be opened in the center of the screen, maximizing the screen. The selection made in the Panel Size field does not affect the opening with modal.<br/>Drawer: The form should be selected if you want to show the panel by sliding from the right of the screen. The form that opens is shown at the top of the current page. The selection made in the Panel Size area does not affect opening with the drawer. |
</div>
</details>
- 'Execute Custom Action' - It is a type of button that can be used when you want to perform different operations when you want to do different operations when clicking the button with code in the .ts or .cs fields of the form other than the existing buttons.
<details>
<summary>Click for the properties of the Execute Custom Action button</summary>
<div>
Button Properties
| Feature | Description |
|---|---|
| Name | Action is the area where the name of the button is defined. The field must be different from the values defined in the name fields in other attached elements, and if the same value is typed, the addition will not be done. |
| Text | It is the area where the title is defined where the action button will be displayed on the web interface. |
| Title | It is the area where the information to be displayed when hovered over the Action button in the web interface is defined. |
| Icon | If the Action button is desired to be displayed with the icon, it is the area where the icon is selected. |
| Visible | Action is the option where the visibility of the button on the web interface is determined. |
</div>
</details>
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.