Add the Accordion Web Block on your Web Screen and as many AccordionItems as you need inside the Accordion. There are also Accordions ready for 3, 4 and 5 items that only need to be placed on the screen. To add content simply use the title and content placeholders.

Parameters

Aliases

Carousel

A Carousel with responsive behavior that can display multiple images or other items in any device and highly customizable.

Username

Username

Username

Username

Username

How to use

Items on the first level after the placeholder will be separated in different items. You can have multiple containers with text and images and each container will be a carousel item. The placeholder can also have a list item providing dynamic content. You can set up how many items to be shown for each device and turn on autoplay on a slow, medium or fast pace.

Parameters

Aliases

Counter

Use counters to give feedback about the current count of several elements, very useful on dashboards or summary pages.

65

Internet

56

TV

10

Phone

How to use

Add content to the number and label placeholders, then, set up the color and size of the Web Block.

Parameters

Aliases

LightBox

Block with only one placeholder for image. It’s possible use local images or External URL, using the ImageURL parameter on the block. To be able to open items, the Utilities\Lightbox Block needs to be placed somewhere on the screen.

Oreo

Hamburger

Ice cream

Waffle

How to use

Add the full sized and thumbnail images to the corresponding placeholders and configure if it will have Sharing Options enabled and the Group name. Items in the same group can be swiped between them.

Parameters

Aliases

Select2

Enhanced Combo box usable in forms.

You can use Select2 with Combo Boxes

Select orientation:

You can use Select2 with List Boxes

Select color:

How to use

Drag the pattern next to a Combo Box and bind the two in the WidgetId parameter or using a custom CSS class. You can also write a text to show if there are no results found.

Parameters

Aliases

Tabs

Used to display large sets of information which can be split into different areas, whilst always remaining a click away. The headers can have rich information like counters, badges or icons.

Fill in the headers and respective content areas of the tabs to be displayed. Empty tabs will not be rendered. Specify the initial active tab and also if the tabs should be loaded on user selection or on page load. Avoid using it in large forms.

Parameters

Aliases

Wizard

Used to split larger tasks into more manageable steps. Usually supported by explicit button navigation to move forward and backward.

Either use one of the Wizard patterns with pre-defined number of steps or use the generic Wizard and drag WizardStep's to its only placeholder. Inside each step, add a link to screen it should lead to. In smartphones, the wizard step labels are replaced with numbers.

Parameters

Aliases

Accordion

Arrange the content by having vertically stacked tabs that expand when clicked. This is an effective way to display aditional information.

Add the Accordion Web Block on your Web Screen and as many AccordionItems as you need inside the Accordion. There are also Accordions ready for 3, 4 and 5 items that only need to be placed on the screen. To add content simply use the title and content placeholders.

Card with a background image and placeholder for content with input parameters to configure the style of the card.

Interactively coordinate proactive e-commerce

How to use

Place your content in the placeholder and set the background image parameter. You can define a custom padding, apply text shadow and choose to remove the default card style. Text_white or other color classes are useful to achieve the desired contrast between the background and the text

Parameters

Aliases

CardLeftImage

A Card with an image on the left side and your content on the right side.

A Carousel with responsive behavior that can display multiple images or other items in any device and highly customizable.

Username

Username

Username

Username

Username

How to use

Items on the first level after the placeholder will be separated in different items. You can have multiple containers with text and images and each container will be a carousel item. The placeholder can also have a list item providing dynamic content. You can set up how many items to be shown for each device and turn on autoplay on a slow, medium or fast pace.

Parameters

Aliases

Info

A simple Tooltip displayed over an information icon.

Name info (top)

Date info (right)

Post info (bottom)

How to use

Simply change the Tooltip text and position.

Parameters

Aliases

LightBox

Block with only one placeholder for image. It’s possible use local images or External URL, using the ImageURL parameter on the block. To be able to open items, the Utilities\Lightbox Block needs to be placed somewhere on the screen.

Oreo

Hamburger

Ice cream

Waffle

How to use

Add the full sized and thumbnail images to the corresponding placeholders and configure if it will have Sharing Options enabled and the Group name. Items in the same group can be swiped between them.

Parameters

Aliases

Modal

A Modal box with custom content that is displayed as an overlay in the page.

Adding the class Load, avoids multiple user clicks while the request is being processed.

How to use

To create these custom buttons use links, instead of buttons, and add the provided classes - Button, along with Success, Cancel, Link, Danger, Icon or Small. To use icons within the custom button wrap the RichWidget’s Icon block with the link. To enable the Loading behaviour, which prevents consequent clicks while the request is undergoing, add the Load class.

Fill in the label of the dropdown button and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.

Parameters

Aliases

ButtonGroup

A row of buttons grouped in single element. Available in groups of 2, 3, 4 or 5.

Normal Behaviour

MaleFemale

12345

Non Responsive Behaviour (enclose the ButtonGroup in a container with class .NoResponsive)

CriticalHighMediumLow

How to use

Add a label to each of the placeholders, along with a radio button. All radio buttons need to be bound to same variable. On smartphones, the button group becomes vertically stacked.

Parameters

Aliases

Calendar

Used to select a date or simply check the calendar and allows to be displayed on smartphones instead of reverting to the native picker.

Click to pick a date

How to use

Drag to the Web Screen and set up the parameters, the only mandatory one is the InputWidgetId which must reference an input widget to store the selected date.

Parameters

Aliases

FileUpload

Pattern to hold a file upload widget and a label, also allows file uploads from mobile devices.

Choose File

No files chosen

How to use

Drag your file upload widget and write your label for the file upload. After the widget is configured, create a button to save the file.

Parameters

Aliases

InputWithIcon

Customize an input with an Icon.

Can be aligned to the right

How to use

Just drag your input and choose the desired icon.

Parameters

Aliases

IconDropdown

Icon button with a dropdown menu. Commonly used with a "cog" icon to display more settings or actions.

Fill in the label of the dropdown icon and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.

Parameters

Aliases

InlineDropdown

Similar to ButtonDropdown, but displayed as normal text, with a following caret.

Fill in the label of the dropdown button and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.

Parameters

Aliases

RangeSlider

Select a single value between two range values or select an interval with two sliders.

Single value selector

Age

Two values selectors

Years

How to use

Place the Web Block on your screen and drag an Input Widget on the Input Number placeholder. You may also drag a second Input on the other placeholder to select an interval. On the pattern properties, you have to select the min and max range values and optionally set a step to increment when sliding.

Parameters

Aliases

Search

Simple search form pattern with a search icon.

How to use

Drag an Input Widget inside the placeholder to use as a search input.

Parameters

Aliases

Select2

Enhanced Combo box usable in forms.

You can use Select2 with Combo Boxes

Select orientation:

You can use Select2 with List Boxes

Select color:

How to use

Drag the pattern next to a Combo Box and bind the two in the WidgetId parameter or using a custom CSS class. You can also write a text to show if there are no results found.

Parameters

Aliases

ToggleButton

A mobile friendly pattern to switch between two states.

Remember Login?

How to use

After placing the Web Block on your Web Screen, drag a checkbox inside the placeholder and the pattern will automatically use it.

Parameters

Aliases

Video

A simple way to embed video content directly into your web pages without the need for a third-party plug-in.

How to use

Drag the pattern to the screen and set the SourceFile with the URL of the video. The URL must be of a direct video file, not a website like Vimeo or YouTube, those servers provide their own embed code already.

Parameters

Aliases

Badge

Displays a number or text notification, a nice way to notify a user about new messages or tasks.

Customer

Open Issues

James Person

12

Mary Jane Watson

1

John Doe

3

Joana Harrison

5

How to use

Simply set a number or text and a color in the Web Block properties. The number can be a local variable, function or any other Service Studio.

Parameters

Aliases

Counter

Use counters to give feedback about the current count of several elements, very useful on dashboards or summary pages.

65

Internet

56

TV

10

Phone

How to use

Add content to the number and label placeholders, then, set up the color and size of the Web Block.

Parameters

Aliases

IconBadge

Similar to the Badge pattern, but displays a number or text notification on top of a RichWidget Icon.

James Person

5

How to use

Set the icon, a number or text and a color in the Web Block properties. The number can be a local variable, function or any other Service Studio.

Parameters

Aliases

ProgressBar

Custom progress bar with indication of a current action in percentage values.

Process Progress:

76%

Upload status:

42%

Gender

Progress

Male

0%

Female

10%

How to use

Simply configure the way the label is displayed and the variable that defines the percentage. You can also change the height of the ProgressBar.

Parameters

Aliases

TileIcon

Display quick information with an icon on top of a small caption.

Internet

How to use

Fill the text placeholder, then, change the icon, color and size. There is also an option to add a tooltip text automatically.

Parameters

Aliases

TileIconText

Display quick information with an icon on the left and small text on the right.

Create a new email screen in a separate flow with an empty theme, then, drag this pattern to the email screen and fill the placeholders with your email data.

Parameters

Aliases

LayoutLogin

A custom page Layout for the login screen that has a small login box centered in the screen.

How to use

On the login page, select the object tree and use the LayoutLogin instead of the current page Layout, then, add the input widgets to the correct placeholders. Silk UI Templates already have the login page using the new LayoutLogin by default.

Parameters

Aliases

LayoutPopup

The Layout for the RichWidgets Popup Editor in Silk UI based projects.

Usually placed above the page title. Define the separator icon, usually "angle_right", "caret_right" or "chevron_right". Place links for each level required to offer the navigation, with the exception of the last which would represent the current page. Leave empty the unrequired levels and these will not be rendered. In smartphones, only the last and previous to last labels are displayed.

Parameters

Aliases

NavigationBar

Provides links to other pages and displays the active page. Sometimes referred to as server-side tabs.

Add links to the only placeholder and they will transform to be presented as navigation. In tablets and smartphones, the items which do not fit will be presented in a dropdown.

Parameters

Aliases

SectionIndex

Lists all Section patterns present in the page and allows the scroll to them on click. Current section highlights when scrolling.

Look at the example on the left side of this page.

How to use

Can be used with sections listed horizontally or vertically. Can be set as fixed to maintain position whilst user scrolls. If set as fixed, be sure to define the margin from the top. For a better user experience, in phones and tablets it displays horizontally and is not fixed on the screen.

Parameters

Aliases

Tabs

Used to display large sets of information which can be split into different areas, whilst always remaining a click away. The headers can have rich information like counters, badges or icons.

Fill in the headers and respective content areas of the tabs to be displayed. Empty tabs will not be rendered. Specify the initial active tab and also if the tabs should be loaded on user selection or on page load. Avoid using it in large forms.

Parameters

Aliases

Wizard

Used to split larger tasks into more manageable steps. Usually supported by explicit button navigation to move forward and backward.

Either use one of the Wizard patterns with pre-defined number of steps or use the generic Wizard and drag WizardStep's to its only placeholder. Inside each step, add a link to screen it should lead to. In smartphones, the wizard step labels are replaced with numbers.

Parameters

Aliases

DisplayOnDevice

Use to select if an element should be loaded in a specific device. Especially helpful to avoid too much data being loaded in mobile devices.

This image will display on all devices.

This image will display on desktop and tablet.

This image will display on phone only.

How to use

Set up the content of the pattern and then change the devices where it will be displayed.

Parameters

Aliases

LoadOnVisible

Loads the content only when it is close to be displayed on the viewport, a good method to prevent high loading times before the page is ready.

Sorry no preview!

How to use

Place this Web Block on your Web Screen and fill it with your content.

Parameters

Aliases

MoveOnDevice

Define the target container for several elements in different devices without duplicating them, i.e. place a search bar on Desktop header but for Tablet and Phone, display on the offcanvas menu.

In Desktop, display image on this container.

In Tablet, display image on this container.

In Phone, display image on this container.

How to use

Place your content on the placeholder and configure where will it be dispayed on tablet and phone.

Parameters

Aliases

ResponsiveImages

Load different images depending on the current device, perfect to change to high DPI images in modern devices.

Desktop

image.jpg

Tablet

image_tablet.jpg

Phone

image_phone.jpg

How to use

Just drop each image in the corresponding device placeholder, this pattern will only load the image for the current device.

Parameters

Aliases

ResponsiveTableRecords

Makes table rows stack on top of each other in phone.

User

Address

Postal Code

City

Alejandra Camino

Buenos Aires

Argentina

alejandra.camino@lexcor.com

Jean Fresnière

Charleroi

Belgium

jean.fresnière@powellexa.mple

Aria Cruz

São Paulo

Brazil

aria.cruz@lexcorp.net

Erivaldo Serra

São Paulo

Brazil

erivaldo.serra@live.evample

Mario Pontes

Campinas

Brazil

mario.pontes@thathmple

Atention: In the default layout of Responsive Table Records only one field is visible, to see the others you need to expand the content, as you can see it below.

User

Address

Postal Code

City

Alejandra Camino

Buenos Aires

Argentina

alejandra.camino@lexcor.com

Jean Fresnière

Charleroi

Belgium

jean.fresnière@powellexa.mple

Aria Cruz

São Paulo

Brazil

aria.cruz@lexcorp.net

Erivaldo Serra

São Paulo

Brazil

erivaldo.serra@live.evample

Mario Pontes

Campinas

Brazil

mario.pontes@thathmple

How to use

Add this Web Block to the screen and place a table records in the placeholder.

Parameters

Aliases

ToggleOnDevice

Can hide content for specific devices and creates a link to expand it.

Drag your items into the placeholder (use a ListRecord to get items dynamically), and select the desired number of elements per line and per device type. You can also configure if you want to have all items with the same height.

Parameters

Aliases

CharacterCount

Displays the characters left in a target input field.

Characters left: 500

How to use

Bind the Input Widget where the user will write the text, set the character limit. The message parameter defines the text to show before the character count.

Parameters

Aliases

Fieldset

The Fieldset element allows authors to group thematically related controls and labels.

Personal information

Name

Username

How to use

Set the label of the Fieldset and then drag Input widgets to the content placeholder.

Parameters

Aliases

FlipContent

A container that builds a flippable widget, has placeholders for front and back elements.

Mouse hover to flip the card

Mouse out to go back

Click to flip the card

Click to go back

Click the icon to flip the card

Click the icon to go back

How to use

Place your content in the placeholders and configure in the pattern parameters how the flip event is triggered and a button to show each side. If only one button is configured or the same button is used for both sides, it will behave as a toggle for both sides.

Parameters

Aliases

Iframe

Add an IFrame to the webscreen.

How to use

Place the IFrame Web Block on the screen and configure the URL to the website you need to load. You can also set custom width and height for the IFrame.

Parameters

Aliases

ScrollToElement

Scrolls the page to an element's position when the page loads.

Sorry no preview!

How to use

Simply configure the element ID and the page will scroll to it after the page loads.

Parameters

Aliases

StackedIcon

Use this pattern to be able to stack two RichWidget Icons on top of each other.

No download permission

How to use

Select both icons to be displayed and their colors. You can also set which is in front and swap their sizes.

Parameters

Aliases

VerticalAlign

Use this pattern to align contents vertically.

Vertical align text

How to use

Simply add an element to each placeholder and they will be aligned automatically.

The Elasticsearch component allows you to integrate the Elasticsearch search engine in your applications. Elasticsearch is a search engine that stores data in an integrated way. It provides a distributed search mechanism that lets you combine many types of full-text searches and returns results instantly.

No results found

When to use

Use the Elasticsearch component to integrate an Elasticsearch engine into your application, to quickly find what you’re looking for. With the Elasticsearch, searches are faster because there are no queries in the database.

How to use

Drag the DynamicResults block to have an input to search a query in your Elasticsearch provider, that then matches and returns a list of results. The component also includes an API to control the results and a sample that shows you how to use it. You need to establish a connection to an Elasticsearch provider, and then use the API to add records.

Use the In-App Chat component to implement a real-time chat and file sharing scenario. Accelerate communication by quickly reaching team members and getting your message across faster and in an easy way.

How to use

Drag the InAppChat block to have a messaging system in your application. To use real time communication, you will need to configure the Firebase component.

Broadcast messages and engage with your users in real time in web applications. Send a simple in-app notification to inform a user or a group of users. The Web InApp Notifications can be used with its Mobile counterpart for the perfect omnichannel experience.

0

Notifications

When to use

Use the Web InApp Notifications component to send real-time in-app messages or notifications to a user or a group of users. This ensures your users are always informed and can react accordingly!

How to use

Drag the component and specify what events to monitor. Then build the action that will react to those events and trigger the notification. Use the InApp Sample to configure the notification