Interfaces are created in the Interface designer that allows you to create a form, a page, etc. using various widgets. But apart from these tools, you can use the Code widget to create a form with a complex custom structure. In the article about custom view of app items, we also talked about adding widgets we need to the Code widget using the UI constant. Now let’s consider this constant’s capabilities in more detail.
To display widgets, the widget API UI.widget is used. It determines the methods that can be used to add available widgets. As the method’s arguments, you can pass the values of the widget’s parameters as well as functions called when widget events happen. Here is an example:
For each widget, there are different arguments with different parameters. You can find widgets and examples of their use in the article about widgets.
Apart from standard widgets, you can create custom widgets in the system using the Widget.render method. As the first parameter, we need to pass the widget’s code with the @ character at the beginning. As the second, we need to pass the values of the widget’s parameters.
Let’s say we created a widget with the code custom_widget_1 that includes an information box and displays a string from the context with the comment code (Comment). As the widget includes a context property, we can pass the necessary value to it. To add this widget using the Code widget, let’s write the following script:
Apart from manually writing code that would add a widget, you can insert it using the context menu. To do that, click the field in the Code widget’s settings with the right mouse button and select Add widget.
A window with available widgets will open. Here you can insert standard widgets that can be used in scripts and custom widgets. Which custom widgets are available depends on the widget’s scope. By default, only widgets of the same level as the widget that is being edited and its nested widgets can be added. For example, if we are working with a widget associated with a workspace, the list will include widgets of the same workspace and the widgets associated with its apps.
When you select a widget, you will see a window with its settings:
When you save the settings, a piece of code adding the widget with these settings is inserted into the Code widget.
When you are inserting a widget into the Code widget, not all widgets are displayed. You can expand the scope to make more custom widgets available in the window. To do that, in the interface designer, open the Settings tab and switch to the Available items section.
When you enable the Allow using all items option, all widgets from other workspaces as well as global custom widgets will be available in the Code widget. Note that if this option is enabled, it will be impossible to export the widget.
If it is an app’s form that is opened in the designer, you will also see the Allow using all items in the workspace option in the Available items section. It also expands the list of available widgets, but only inside the workspace.
Web components
Interfaces are created in the Interface designer that allows you to create a form, a page, etc. using various widgets. But apart from these tools, you can use the Code widget to create a form with a complex custom structure. In the article about custom view of app items, we also talked about adding widgets we need to the Code widget using the
UIconstant. Now let’s consider this constant’s capabilities in more detail.Add widgets
To display widgets, the widget API
UI.widgetis used. It determines the methods that can be used to add available widgets. As the method’s arguments, you can pass the values of the widget’s parameters as well as functions called when widget events happen. Here is an example:<%= UI.widget.viewContextRow('price', { required: true, onChange: Scripts.calcTotal }) %>For each widget, there are different arguments with different parameters. You can find widgets and examples of their use in the article about widgets.
Apart from standard widgets, you can create custom widgets in the system using the Widget.render method. As the first parameter, we need to pass the widget’s code with the @ character at the beginning. As the second, we need to pass the values of the widget’s parameters.
Let’s say we created a widget with the code
custom_widget_1that includes an information box and displays a string from the context with thecommentcode (Comment). As the widget includes a context property, we can pass the necessary value to it. To add this widget using the Code widget, let’s write the following script:Apart from manually writing code that would add a widget, you can insert it using the context menu. To do that, click the field in the Code widget’s settings with the right mouse button and select Add widget.
A window with available widgets will open. Here you can insert standard widgets that can be used in scripts and custom widgets. Which custom widgets are available depends on the widget’s scope. By default, only widgets of the same level as the widget that is being edited and its nested widgets can be added. For example, if we are working with a widget associated with a workspace, the list will include widgets of the same workspace and the widgets associated with its apps.
When you select a widget, you will see a window with its settings:
When you save the settings, a piece of code adding the widget with these settings is inserted into the Code widget.
Available items
When you are inserting a widget into the Code widget, not all widgets are displayed. You can expand the scope to make more custom widgets available in the window. To do that, in the interface designer, open the Settings tab and switch to the Available items section.
When you enable the Allow using all items option, all widgets from other workspaces as well as global custom widgets will be available in the Code widget. Note that if this option is enabled, it will be impossible to export the widget.
If it is an app’s form that is opened in the designer, you will also see the Allow using all items in the workspace option in the Available items section. It also expands the list of available widgets, but only inside the workspace.