Skip to main content
Version: v11.9.2

How to apply Smart Template and Layout for Widgets

For Cards, List, Wizard, and Breadcrumb widgets, you can choose and apply alternative UI representation while you can visually see the changes on the canvas as you click on the template.

widget template

This feature is used to change the template, or the layout of the widget. It identifies some of the most used templates and layouts for the widget.

The following are the two types.

  1. Widget Template: This is the arrangement of the inner elements.

  2. Widget Layout: This is the arrangement of the outer shell.

Choosing Widget Template from Canvas​

  1. Drag and drop the List widget, and bind the widget to a dataSet.

  2. When you select the List widget on the canvas, you can see the template icon on the toolbar. Click the template icon.

widget template icon on toolbar

  1. It opens a dropdown, which displays the list of available widget templates.

list widget template

  1. Select the template from the list. The template will be changed and the bindings remain the same from the previous template to the selected-template based on the name of the inner widgets.

Similarly, you can apply a widget template for the Cards widget also.

Choosing Widget Layout from Canvas​

  1. Drag and drop a Wizard widget.

  2. When you select the Wizard widget on the canvas, you can see the layout icon on the toolbar. Click the layout icon.

widget layout icon on toolbar

  1. It opens a dropdown; it displays the list of available widget layouts.

wizard widget template

  1. Select the layout from the available list. The layout will be changed and the properties, events, and bindings of the widget remain the same.