Use outlets

Use outlets to dynamically update your page and get data from your form

What are outlets

Outlets can be set on any uicomponent action on your page. Outlets can be seen as ID's for the actions you use it on. Outlets have different purposes, depending on what uicomponent it is being used on. It can be used to update the content within that component, add, remove or toggle classes, add or remove styling, get and update the data from a from. To add an outlet you click the 3 dots on the top right of the action. Select outlet and type in something you want to call that outlet.

Update page content

One of the actions you will use the most that uses the outlet as a reference point, is the UI Update dynamic content. With this action you can update the content within the selected outlet. For example, the detail page you have on your page needs to change to an editable form or you want to add an image to the top or bottom of the content. To set the update position you can use the Position pin. This pin accepts 3 values: top, overwrite and bottom. These options can be selected when you drag left click from the pin.

Unique ID

In some cases it can happen that you have multiple outlets on your page. This can happen when you use an UI: foreach with an outlet in the loop. When you want to update one of these items from the loop, it will update all of the items of that loop. The prevent this from happening you can set the Unique ID for each item. This ID needs to be unique for each item in that loop. So make sure you use a different ID value for the items. You can use the index of the loop as an ID or use an unique value from the loop item. When you want to update a specific item in that loop you can use that id and connect it in the Selector of the Dynamic update or like the example any of the update actions for the style or class.

Outlet class/style actions

The action you most likely will be using in RUAL is the Update dynamic content. But there are also other actions that uses the outlet. Some of them shown on the right. These actions will only work when you actually enter an outlet. Only giving an unique id to one of these actions won't work.