Invoke a Configured Component
Invoking a configured component allows you to use the components created in a module in the screens of a parent app or module. Configured components are represented by interfaces, and are invoked from the screens editor. You can configure components as if you were configuring any component in the screen of the parent app.
To invoke a configured component from the screens editor, previously create the interface that represents it and link the module to the parent app or module. The instructions below set an example on how to invoke a configured component from the parent app. These instructions apply to any configured component invoked from either an app or another module.
In this example, you will invoke a configured component (see image below) that allows the user to log in the app and sign in in case they are new to the app. Given that the component contains generic fields, you can reuse it (in this app and in any other app you may need it).
Once you selected the GoldBank app, click Settings (Overview > Settings).
Note
Enabling dependencies allows you to use the module’s content in the screens editor for the app selected. To learn more about dependencies, read Settings.
Click Dependencies to open the tab.
Find the Login_module and click the toggle switch to link it to the GoldBank app.
Click Save & Close to save changes and be redirected to the Overview.
In the Overview, click Screens. Find the Login Forgot Password-m screen and click Design or double click the screen card.
Note
You can also access the screens of the app in Branch Edition > Screens.
Once the screens editor opens, go to the left panel. Click Components . The components tab contains all the components available in Studio as well as configured components that will be displayed as separate components.
Scroll down to the bottom of the list and find the module Login_module . It contains the configured component called Login_component displayed as a component.
Drag and drop the Login_component component to the canvas.
Go to the right panel. Considering the design of the component, configure the width (W) attribute with 100 and the height (H) attribute with 84 , and leave the % unit of measurement selected, so that all the information in the reused component is visualized. Then, place the component in the desired position of the screen.
Note
You can change the size and position and unit of measurements according to the requirements of your project and the design of the screens previously defined.
Now you are able to perform different actions depending on which the parameters you set when you configured the interface that represents the component. The interface parameters are Input Output, Event and Message and appear in different sections of the right panel when you configure the screen.
Input parameters set in the interface appear in the Basic inputs section of the Design tab in the right panel. In this section, each attribute will be titled with the name given to the input parameter.
For this example, the Login_component configured component has one Input parameter configured, called Welcome, with the default value Ready to work?. The Internal register set is 2000, which means that if this parameter is configured in the parent app, when the component is invoked, that value will be saved in register 2000.
Go to the right panel.
Go to the Basic Inputs section. In the Welcome attribute, delete the default value and enter Ready to start? . This value will be saved in the 2000 register. Then, when you invoke the register in any other part of the screen, for this example, in the Welcome message the stored message Ready to start? will appear on the app screen.
Output parameters set in the interface appear in the Basic outputs section of the Design tab in the right panel. In this section, each attribute will be titled with the name given to the output parameter. To learn more about how to configure output parameters, read Create or Edit an Interface.
For this example, the Login_component configured component has one Output parameter configured, called Output Username. The Internal register set is 1503. As shown in the image above, the configured component content includes four components: a text label for the welcome message, a text input for the Username, a text input for the Password, and a Login button. For the Username text input you previously set the Auto dump attribute with register 1503.
Go to the Basic Outputs section. In the Output Username attribute, enter the register 5000. As a result, whenever the user enters a value in the Username field, that value will be stored in the module register 1503 and, in real time, that value will also be stored in the parent app register 5000.
Event parameters set in the interface appear as Interface Messages in the screens editor. Interface Messages are available in the Create New Link modal that appears when you configure an action from the Events & Actions section, in the Actions tab of the right panel.
When you configure an action, you can invoke that event. This means that, if you configure the action, when the user performs it, the event defined in the interface is executed. To learn more about events configured in interfaces, read Create or Edit an Interface.
In this case, you need the app to show a Recover account label when the user click the Forgot password button. The label will be displayed through the process defined in the event configured for the interface. Refer to the instructions below to learn how to set the event.
Go to the left panel. Click Treeview.
Click the Component interface component.
Go to the right panel. In the Component id attribute, set the id Login_interface to identify the configured component.
Important
Each configured component must have a Component id defined to be able to invoke the event from the Actions tab.
Go to the Actions tab. in the right panel and go to the Events & Actions section. In the On Click attribute, click the vertical three dot icon. The Create New Link modal opens, where you have to complete the fields as explained below.
In the Select link type drop-down menu, click the arrow and select Event.
In the Select component drop-down menu, click the arrow and select Login_interface, which represents the configured component.
In the Action field, click the arrow and select SHOWLABEL.
Click Accept.
Message parameters set in the interface appear as attributes in the Events & Events Actions section, in the Actions tab of the right panel. If you configured a message in the interface, it indicates the parent app to execute the specific event or action configured in that parent's screens.
In addition, before invoking the configured component from the parent, you must configure an event in the module's screen to trigger that message. Then, once the event occurs in the module, the message is sent to the parent app and the app executes the event or action set. For this example, the interface message must be configured for the Login button (located in the configured component). Refer to the instructions below to learn how to configure the interface message in the module and how it is commmunicated to the parent app.
Go to the saving options in the toolbar. Then, click the arrow and click Save and Close.
In the Commit Message modal that opens, complete the Description with an explanation of the changes made to the screen. For this example, write New component interface added.
Go to the Overview. Then, click Apps and Modules.
Click Modules to open the tab. Find the module Login_module and click it.
In the Overview, click Screens.
In the Screens page, double click on the Login screen card.
Go to the left panel. Click Treeview to open the tab and click the Button component to select it in the canvas.
Go to the right panel and then click Actions to open the tab.
Go to the Events & Actions section. In the OnClick attribute, click the vertical three dot icon. The Create New Link modal opens, where you have to complete the fields as explained below.
In the Select link type drop-down menu, click the arrow and select Interface message.
In the Select message drop-down menu, click the arrow and select Login_component@Login_component: On_Login_Click. As a result, when the app user clicks on the Login button, the message will be sent to the parent app and the parent app will execute the action or event you will then define for the OnLoginClick event.
Click Accept.
Go to the saving options in the toolbar. Then, click the arrow and click Save and Close.
In the Commit Message modal that opens, complete the Description with an explanation of the changes made to the screen. For this example, write Changes to the login button..
Go to the Overview. Then, click Apps and Modules.
Click Apps to open the tab. Find the Goldbank app and click it.
Go back to the Login Forgot Password-m screen.
Go to the left panel. Click Treeview to open the tab and click the Component interface component to select it in the canvas.
Go to the Events & Actions section. In the On_Login_Click attribute, click the vertical three dot icon. The Create New Link modal opens, where you have to complete the fields as explained below.
In the Select link type drop-down menu, click the arrow and select View.
In the Select view drop-down menu, click the arrow and select V01.
In the Visual areas section, click the arrow and select S004 - Home. As a result, when the user clicks on the login button, the module communicates to the parent app that the screen S004 - Home must be shown.
Click Accept.
Best practice
As a best practice, modules - and therefore, their content (either configured components or screens flows) - should not have a theme applied. Hence, when the module's content is invoked in the screens editor, the configured component or screens flow will inherit the theme applied to the parent app. Applying a theme to a module affects the reusable nature of the module.