Button Widget

Definition

The Button Widget allows to display a button on a feature, allowing to redirect the user to another feature.

Configuration

Properties

Properties name	Type	Mandatory	Description	Values
align	`String`	NO	Used to define the display area of the Widget.	LEFT, RIGHT
authenticationLevelSufficient	`Boolean`	NO	Used to define if the feature is "sensitive" or not. If true, to access the Feature, the user will have to upgrade its authentication level (see settings BUM).	true, false
borderless	`Boolean`	NO	Used to define if the label of the Widget is underlined or not (when the cursor goes over the text).	true, false
circle	`Boolean`	NO	Used to define if the border of the Widget is circled or not. If false, the border of the Widget is square-shaped.	true, false
color	`String`	NO If no color is defined, borderless and circle properties have no effect.	Used to define the color of the label, border and highlight of the Widget.	For available colors, see Metronic Color Library
featureToExecute	`String`	NO	Used to define the redirection of the user to an immediate execution feature. This option must be configured in the feature indicated in this tag). You cannot use both <target> and <featureToExecute> tags in the same Widget configuration. You need to configure special i18n keys in order to display the pop-up correctly.	id of the feature
icon	`String`	NO	Used to define if an icon is displayed inside the button.	For available icons, see https://fontawesome.com/v4.7.0/icons/ fa fa-"name of the icon"
label	`Boolean`	NO	Used to define if the label of the Widget is displayed inside the button or not. The label will have to be translated by a I18N key: "ui.features."id of the feature".views."id of the view".sections."id of the section".widgets."id of the action".label	true, false
target	`ButtonTargetSupport`	NO If no target is defined, the button will have no action.	Used to define the redirection of the user to another feature. This is a polymorphic property that can be of three different types: ButtonLinkTarget Allows to configure a link that will open in the current tab or a new tab. The “target” property can take two values: SELF = open link in same tab NEW_TAB = open link in a new tab XML `<target xsi:type="ctdbum:LinkTargetType"> <link>feature://test_user-card-update/{dataKey.id}</link> <target>SELF \| NEW_TAB</target> </target>` ModalWidgetTarget Open a Widget in a modal dialog (for such an action as: reset a password, role dashboard, ...). The size of the dialog can be controlled by defining a display option on the widget (modalSize : XS ,SM,LG) XML `<target xsi:type="ctdbum:ModalWidgetTargetType"> <widgetToOpen id="role-dashboard" xsi:type="ctdbum:RoleDashboardWidgetType"> ... </widgetToOpen> </target>` ModalTarget Allows to configure a link that will open in a modal dialog. It is similar to the widgetToOpen case but the modal is fully routable using the (secondary:…) url pattern. The “onDismiss” property control the behaviour of the primary route (the one behind the modal) after the modal is dismissed. NONE = Do nothing REFRESH = Refresh the primary route XML `<target xsi:type="ctdbum:ModalTargetType"> <link>feature://test_user-card-read/{dataKey.id}</link> <modalSize>LG</modalSize> <onDismiss>NONE</onDismiss> </target>`	For a link to a feature: feature://<featureId>/{dataKey.id} For a hub Feature: feature://user-hub.user-card-read/{dataKey.id} For a link to a user task: task://<action>/<id> `task://to-approve/<taskInstanceId>` `task://about-me/<operationId>` `task://submitted-by-me/<operationId>` `task://admin/<operationId>`
outline	`Boolean`	NO	Used to define how to display the configured color.	true (background is white and text is the configured color), false (background is the configured color and text is white)
size	`String`	NO	Used to define the size of the button.	XS, SM, LG

Example

Code

Link configuration

CODE

<action id="publish-role" xsi:type="ctdbum:ButtonWidgetType">
	<hidden>false</hidden>
    <config>
    	<align>RIGHT</align>
        <authenticationLevelSufficient>false</authenticationLevelSufficient>
        <borderless>false</borderless>
        <circle>true</circle>
        <color>red</color>
        <icon>fa fa-cart-plus</icon>
        <label>true</label>
        <target xsi:type="ctdbum:LinkTargetType">
          <link>feature://role-publication-create/{routeObjectId}</link>
          <target>SELF | NEW_TAB</target>
        </target>
        <outline>false</outline>
        <size>SM</size>
	</config>
</action>

Widget To Open configuration

CODE

<action id="role-dashboard" xsi:type="ctdbum:ButtonWidgetType">
	<hidden>false</hidden>
    <config>
    	<align>RIGHT</align>
		<authenticationLevelSufficient>false</authenticationLevelSufficient>
        <borderless>true</borderless>
        <circle>true</circle>
        <color>red</color>
        <icon>fa fa-book</icon>
        <label>true</label>
        <linkTarget>SELF</linkTarget>
        <outline>false</outline>
        <size>XS</size>
        <target xsi:type="ctdbum:ModalWidgetTargetType">
          <widgetToOpen id="role-dashboard" xsi:type="ctdbum:RoleDashboardWidgetType">
        	<hidden>false</hidden>
            <displayOptions>
              <modalSize>LG</modalSize>
            </displayOptions>
            <config>
            	<bordered>false</bordered>
                <title>true</title>
                <search>
                	<actions/>
                    <allowExport>false</allowExport>
                    <columns/>
                    <rowClickActions/>
                    <additionalSearchAttributes/>
                    <displayFrozenOperators>true</displayFrozenOperators>
                    <frozen>NO</frozen>
                    <modes>
                    	<mode>SIMPLE</mode>
                    </modes>
                    <objectReferences/>
				</search>
			</config>
		  </widgetToOpen>
        </target>
	</config>
</action>

Modal Link configuration

CODE

<action id="publish-role" xsi:type="ctdbum:ButtonWidgetType">
	<hidden>false</hidden>
    <config>
    	<align>RIGHT</align>
        <authenticationLevelSufficient>false</authenticationLevelSufficient>
        <borderless>false</borderless>
        <circle>true</circle>
        <color>red</color>
        <icon>fa fa-cart-plus</icon>
        <label>true</label>
        <target xsi:type="ctdbum:ModalTargetType">
          <link>feature://role-publication-create/{routeObjectId}</link>
          <modalSize>LG</modalSize>
          <onDismiss>NONE</onDismiss>
        </target>
        <outline>false</outline>
        <size>SM</size>
	</config>
</action>

Configuration

Properties

ButtonLinkTarget

ModalWidgetTarget

ModalTarget

Example

Read Next