Skip to main content

Migrating the patterns of the Silk web applications to OutSystems UI

OutSystems

Migrating the patterns of the Silk web applications to OutSystems UI

This document outlines the instructions for the migration path where you upgrade the application UI framework by first modifying the structure and then changing the patterns. The path considers only the basic implementation of each pattern. Advanced implementations that include dynamic values for parameters are not covered in this version of the document. We do, however, guarantee the same level of customization for each pattern available.

The document is part of the migration path guide for customers of OutSystems 10 who want to continue developing their web application in OutSystems 11 Web UI Framework. Please refer to the table of content for the entire guide.

Accordion

The Accordion pattern is distributed as two separate patterns: Accordion and AccordionItem. The pattern enables you to have multiple items open, replicating the Section Expandable behavior.

Each AccordionItem provides you with two new options: IsOpen and IsDisabled, enabling you to control the pattern programmatically.

When replacing the Accordion usage with the new pattern, sample content will be added. You can either:

  • Delete the sample content and move your content to the correct place, and subsequently, replace the usage of AccordionItem with the new AccordionItem pattern.
  • Delete the sample content inside the new AccordionItem and move your content to the correct place, and then, delete the old AccordionItem blocks.
Silk Web UI OutSystems Web UI

Alert

When replacing the Alert pattern, your content will automatically be in the correct place. However, you should update the AlertType parameter to match your selection to the new Alert entity.

A new option is available: ShowCloseButton, which enables the end-user to close the message.

Silk Web UI OutSystems Web UI
 

Align Center

When replacing the VerticalAlign pattern, the content from Cell1 and Cell2 will become unused content from non-existing placeholders. Move your content from the cells to the new Content placeholder.

Set the Orientation parameter as Horizontal to have the same behavior of VerticalAlign - Items align horizontally - or as Vertical to align the items on top of each other.

Silk Web UI OutSystems Web UI
 
 

Badge

When replacing the Badge pattern, the assigned variable or value will become an unused argument. Reassign that value to the Content parameter.

Silk Web UI OutSystems Web UI
 

Balloon

When replacing the Balloon usage with the new pattern, your content will automatically be in the correct place. But, sample content will be added. You can either:

  • delete the sample content
  • change it to fit your application

You will have to map the Trigger parameter to match your selection with the new Trigger entity.

There are two new placeholders: Title and Footer. There is also a new parameter that enables you to choose where the Balloon pattern will appear in relation to the provided widget.

Silk Web UI OutSystems Web UI
 
 

Blank Slate

When replacing the BlankSlate pattern, your content inside the Content placeholder will be in the correct place. But, your content inside the Actions placeholder will have to be moved.

Silk Web UI OutSystems Web UI
 
 

The new Breadcrumbs pattern is distributed as two separate patterns: Breadcrumbs and BreadcrumbsItem.

The new pattern provides sample content for you to customize. You can keep the sample links to navigate to other screens or actions and the icons can be different, depending on the level. The new pattern also enables for the Breadcrumbs to be built dynamically, with a list.

When replacing the Breadcrumbs pattern, the previously static Levels, are now unused placeholders. Move your content from the Level placeholders to the Title placeholder on each level.

If you wish to keep the same Icon from the old pattern, make sure you set the new Icons IconName with to that value.

Silk Web UI OutSystems Web UI
 

Button Group

The ButtonGroup pattern is distributed as two separate patterns: ButtonGroup and ButtonGroupItem. The new ButtonGroup pattern requires the Text or Label to have the 'btn' class.

Dragging and dropping the ButtonGroup pattern in the screen will instantiate sample content, implementing the same behavior as the ButtonGroup3.

When replacing the ButtonGroup pattern, sample content will be added and your content must be moved. Delete the content from each ButtonGroupItem and move your content to the matching placeholder.

IsJustified parameter makes items evenly distributed.

Silk Web UI OutSystems Web UI
 

Card

When replacing the Card pattern, your content inside the Content placeholder will be in the correct place. But, you will have to move the content inside the Title and Actions placeholders.

Silk Web UI OutSystems Web UI

Card Background

When replacing the CardBackground pattern, your content inside the Content placeholder will be in the correct place. But, the values of the input parameter will have to be removed.

The BackgroundImage input parameter is now set by using an Image directly in the placeholder, giving you more control over the source of the image.

Color, Position, MinHeight and ExtendedClass input parameters are now available. Color determines the background overlay color that separates the content from the background image. The Position parameter sets the position of the content inside the Card.

Silk Web UI OutSystems Web UI
 

Card Sectioned

When replacing any Card pattern with the CardSectioned, your content inside the Title and Content placeholders will be in the correct place. But, content inside the Actions placeholder will have to be moved.

The new Footer placeholder replaces the old Actions and adds sample content. Delete the sample content and move your content from Actions to Footer.

The Orientation parameter sets the display of the Title in relation to the Content and Footer. Set it to Horizontal to have the same behavior of the old CardLeftImage pattern. The IsRight parameter works with the previous parameter, setting the Title alignment to the right or left side.

Silk Web UI OutSystems Web UI
 
 

Columns

When replacing the Columns pattern, the content will remain in the correct place.

  • TabletBehavior and PhoneBehavior parameters must be mapped to the new BreakColumns entity.
  • MarginBottom parameter is no longer available.
  • UseGutter (boolean) is replaced with Gutter that can be set with a different selection of sizes, from None to ExtraExtraLarge (0px - 48px).
  • UseBorder is deprecated. To replicate the behavior, the content of the columns must be inside a container with the border-size-s padding-s classes.
  • To change the color of the border, add the text- class to the container. With this class the color of the child content will change accordingly, so you need to add the text- to the child(ren) container to override the parent definition.

When replacing the Columns pattern, TabletBehavior and PhoneBehavior must be mapped to the new entity. The remaining parameters will become unused arguments, that you need to remove. You can now control the size of the Gutter, using the Gutter parameter.

Silk Web UI OutSystems Web UI
 

Counter

When replacing the Counter pattern, a sample content will be added. Move your Label content to the right container, in this case, the second one where "Counter title" text is. The same applies to the content inside Number. You have to move it to the container where "26" is.

An Icon was introduced as sample content. You can delete it or customize it if you wish to keep it.

Silk Web UI OutSystems Web UI
 

File Upload

When replacing the FileUpload pattern, all your content will be in the correct place. Delete the unassigned ButtonText value.

Silk Web UI OutSystems Web UI
 

When replacing the Gallery pattern, your content will be in an unused placeholder; you'll need to move it to the ListRecords placeholder.

The previous pattern relied on the parameters to set the number of items per row, while when using the new pattern, the width of the container inside the list will determine the number of items: Width 6 col = 2 items/row. Width 4 col = 3 items/row. And so on (assuming the 12 column grid is used).

Silk Web UI OutSystems Web UI
 

When replacing the Modal pattern, your content inside the Title and Content placeholders will be in the correct place. But, the content inside the Actions placeholder will have to be moved. The new ToggleModal action now requires a WidgetId, which corresponds to the Modal you want to show/hide. This means that you can have multiple Modal patterns in the same page and show/hide each one individually.

About the placeholders:

  • The new Footer placeholder replaces the old Actions and adds sample content. Delete the sample content and move your content from Actions to Footer.
  • The new Icon placeholder can be used to house a link to close the Modal.

About the parameters:

  • The pattern now has four new parameters: Position, HasOverlay, EnterAnimation and LeaveAnimation. Position lets you define where, in the screen, the Modal is shown.
  • HasOverlay, if set to True, shows an overlay that darkens the background, otherwise, the background is not affected.
  • EnterAnimation and LeaveAnimation, are used to set the animations when showing/hiding the Modal, respectively.
Silk Web UI OutSystems Web UI
 
 
 
 

Panel

When replacing the Panel pattern, your content inside the Title, Actions, and Content placeholders will be in the correct place. But, your content inside the TitleFooter and ActionsFooter will have to be moved to the Footer placeholder, which will have sample content that you may use or delete.

Silk Web UI OutSystems Web UI
 
 

Progress Bar

When replacing the ProgressBar pattern, Title and Value placeholders will be added with sample content. You can delete the sample content and the result will be only the progress bar; or you can customize it. If you're keeping the sample content, you should convert the value to an expression and set its Value with the same variable of the Percentage argument.

Silk Web UI OutSystems Web UI
 
 

Section

When replacing the Section pattern, all your content will be in the correct place. To implement the SectionExpandable behavior, refer to the Accordion pattern.

Silk Web UI OutSystems Web UI

Toggle Button

When replacing the ToggleButton pattern, the check box will lose its variable. Reassign your variable to the check box.

Silk Web UI OutSystems Web UI

Tooltip

The Tooltip pattern has been changed in its structure and parameters.

The target widget is now placed inside the Widget placeholder instead of providing the id via input parameter. The same goes for the content, which is now placed directly in the Content placeholder instead of the Message parameter.

The Trigger and Position parameters must be mapped to the new Trigger and Position entities.

Silk Web UI OutSystems Web UI
 
 

Icon Badge

When replacing the IconBadge pattern, a new Icon placeholder will be added with an icon inside. You will need to set the new icon's IconName with the same value in the unused Icon argument. You will also need to set the Content parameter with the unused Number argument.

Silk Web UI OutSystems Web UI
 

Input With Icon

When replacing the InputWithIcons the input will be in the correct place. The structure is slightly changed and you need to set the IconName to the one in the unused parameter.

Silk Web UI OutSystems Web UI