Component | Properties and notes |
Button | A styled, clickable UI with keyboard operability for elements.  Id: An ID that must be specified for the button.Text: The text that appears on the button itself.Primary: Indicates whether the button will be highlighted with a background color.Icon: An icon that is displayed inside the button. You can choose from a predefined list of icons by clicking Edit and selecting an icon in the Icon window that opens.Events:Click Event Function: The name of a JavaScript function that runs when the user clicks this button.The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions. |
Expander | A collapsible container that when clicked, alternately expands to display, and collapses to hide its contents. To add contents, you drag at least one layout row to the expander, then drag additional components into that row, or into other rows that you have added. Note: You can construct a tree view by adding expanders to an existing expander row. Id: An ID that must be specified for the expander.Expanded: Indicates whether the expander is initially displayed in an expanded state.Text: The text that appears on the expander itself. |
Tab Strip | A container for one or more tabs that when clicked, each opens its own container to display contents for access. To add tabs to a tab strip, see the TabStrip Items property described below. To add contents to an existing tab: 1. Select the tab from the tab strip by its label text in the drop-down menu beside its trash icon. The selected tab opens. 2. Drag at least one layout row to the tab, then drag additional components into that row, or into other rows that you have added to the tab. Id: An ID that must be specified for the tab strip.TabStrip Items: Click Edit to add or remove tabs in the tab strip. See Editing tab strip items for more information.Tabs Position: Specifies where around the tab strip the tabs appear. You can select either top, left, right, or bottom. The order of tabs is always left-to-right (for top or bottom) or top-to-bottom (for left or right).Events:Select Event Function: The name of a JavaScript function that runs when the user selects a tab in the tab strip.Show Event Function: The name of a JavaScript function that runs when the selected tab displays its contents.The code for these event functions must be included in the file, application-folder\app\src\modules\module-folder\view-folder\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions. |
Toolbar | Provides different types of items, such as buttons, toggle buttons, split buttons, button groups, and other customized elements. Id: An ID that must be specified for the toolbar.Toolbar Items: Click Edit to add or remove items on the toolbar. See Editing toolbar items for more information.Resizable: If the size of the browser window changes in a way that hides one or more tools, this option allows the toolbar to move the overflow into a drop down list.Events:Click Event Function: The name of a JavaScript function that runs when the user clicks a button in the toolbar.Toggle Event Function: The name of a JavaScript function that runs when the user toggles a button in the toolbar.The code for these event functions must be included in the file, application-folder\app\src\modules\module-folder\view-folder\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions. |
