Requirements:
This section explains how to set up a feedback system for a user of widget UserList.
The goal is to display transmitted error messages of widget UserList on widget InfoBanner based on the language.
Solution
Widgets and files to be used:
•Widget InfoBanner: This widget is used to display the error messages.
•2 predefined styles for widget InfoBanner: These styles visually indicate whether the action was successful or unsuccessful.
•TMX file: Localizable texts for widget UserList that are displayed in widget TextOutput.
•Widget TextOutput: This widget is used to display the error messages.
•Snippet: Snippet is used to display text from the text group in the HMI application.
•Session variable: The session variable is used to store values.
Using the widgets
Step 1:
Widget UserList and the UserListItem widgets are placed on the piece of content and put in a functioning state. For additional information, see Example configuration. The buttons for actions DeleteUser and OpenAddUserDialog are also added.
Step 2
Widget InfoBanner should then be placed on the piece of content and the following settings applied:
•autoClose=true
•autoCloseTime=5000
•transitionCloseTime=500
•transitionOpenTime=500
Step 3
Widget TextOutput is now placed in widget InfoBanner, and properties wordbreak, wordwrap and multiline are set to true.
Step 4
File Styles.style is added or an already existing style file is modified in the next step.
The style file is opened with a double-click and the following two new styles are added for widget InfoBanner:
<Style xsi:type="widgets.brease.InfoBanner" id="error" backColor="#800000" />
<Style xsi:type="widgets.brease.InfoBanner" id="success" backColor="#6B8E23" />
Step 5
The next step is to add the necessary TMX file (UserList.tmx) to the system. This is located in the Object Catalog under folder "mappView".
|
|
The newly added TMX file is opened with a double-click.
The namespace should exist from the widget in the following form: IAT/Widgets/UserList.
The following 'error.STATUS' text IDs are used as error texts. The user can adjust the predefined texts as desired.
The newly added TMX files must be added to the text configuration at the end. This transfers them to the target system.
|
|
Step 6
A snippet file is added to retrieve a text from a text group or text file in the next step. The snippet should reference the namespace of the TMX file and text ID: Widgets / Userlist / error.STATUS. {1}
<Snippet id="SnippetStatus" xsi:type="session" type="IndexText" dormatItem="IAT/Widgets/UserList/error.STATUS.{1}" />
Step 7
Next, a session variable is added that will be bound to the snippet.
<Variable name="UserListErrorCode" xsi:type="ANY_INT" value="1" /
Step 8
The binding between the session variable and the snippet must be created in a binding file. A binding between the snippet and widget TextOutput is also required.
<Binding mode="oneWay">
<Source xsi:type="session" refId="UserListErrorCode" attribute="value" />
<Target xsi:type="snippet" refId="SnippetStatus" attribute="value"/>
</Binding>
<Binding mode="oneWay">
<Source xsi:type="snippet" refId="SnippetStatus" attribute="value" />
<Target xsi:type="brease" widgetRefId="TextOutput1" contentRefId="UserListContent" attribute="value" />
</Binding>
Step 9
Finally, everything must be connected with event bindings. This is where most of the functionality takes place.
The return value of the delete action is stored in the session variable.
The return value of events UserAdded and OnError is also noted in the session variable. (It is also possible to add event UserModified here depending on which events or actions should be controlled.)
The stored return value (error code) in the session variable specifies whether the determined action was successful or not.
The appropriate text ID can be selected via this code and the correct error message displayed in InfoBanner using the previously created bindings.
If the value of the session variable changes, an event should be triggered. If the value of the session variable is > 1, the style of widget InfoBanner should be set to "error"; if the value = 1, the style should be set to "success".
Finally, widget InfoBanner is opened.
<EventBinding id="UserListContent.AddUserBtn.Click">
<Source xsi:type="widgets.brease.Button.Event" contentRefId="UserListContent" widgetRefId="AddUserBtn" event="Click" />
<EventHandler>
<Action>
<Target xsi:type="widgets.brease.UserList.Action" contentRefId="UserListContent" widgetRefId="UserList1">
<Method xsi:type="widgets.brease.UserList.Action.OpenAddUserDialog" />
</Target>
</Action>
</EventHandler>
</EventBinding>
<EventBinding id="UserListContent.DelUserBtn.Click">
<Source xsi:type="widgets.brease.Button.Event" contentRefId="UserListContent" widgetRefId="DelUserBtn" event="Click" />
<EventHandler>
<Action>
<Target xsi:type="widgets.brease.UserList.Action" contentRefId="UserListContent" widgetRefId="UserList1">
<Method xsi:type="widgets.brease.UserList.Action.DeleteUser" />
</Target>
<Result>
<ResultHandler>
<Action>
<Target xsi:type="session.VariableAction" refId="UserListErrorCode">
<Method xsi:type="session.VariableAction.SetValueNumber" value="=result" />
</Target>
</Action>
</ResultHandler>
</Result>
</Action>
</EventHandler>
</EventBinding>
<EventBinding id="UserListContent.UserList1.UserAdded">
<Source xsi:type="widgets.brease.UserList.Event" contentRefId="UserListContent" widgetRefId="UserList1" event="UserAdded" />
<EventHandler>
<Action>
<Target xsi:type="session.VariableAction" refId="UserListErrorCode">
<Method xsi:type="session.VariableAction.SetValueNumber" value="=Code" />
</Target>
</Action>
</EventHandler>
</EventBinding>
<EventBinding id="EventBinding_1">
<Source xsi:type="widgets.brease.UserList.Event" contentRefId="UserListContent" widgetRefId="UserList1" event="OnError" />
<EventHandler condition="">
<Action>
<Target xsi:type="session.VariableAction" refId="UserListErrorCode">
<Method xsi:type="session.VariableAction.SetValueNumber" value="=result" />
</Target>
</Action>
</EventHandler>
</EventBinding>
<EventBinding id="EventBinding_2">
<Source xsi:type="session.Event" refId="UserListErrorCode" event="ValueChanged" />
<EventHandler condition="newValue > 1">
<Action>
<Target xsi:type="widgets.brease.InfoBanner.Action" contentRefId="UserListContent" widgetRefId="ErrorInfoBanner">
<Method xsi:type="widgets.brease.InfoBanner.Action.SetStyle" value="error" />
</Target>
</Action>
</EventHandler>
<EventHandler condition="newValue = 1">
<Action>
<Target xsi:type="widgets.brease.InfoBanner.Action" contentRefId="UserListContent" widgetRefId="ErrorInfoBanner">
<Method xsi:type="widgets.brease.InfoBanner.Action.SetStyle" value="success" />
</Target>
</Action>
</EventHandler>
<EventHandler>
<Action>
<Target xsi:type="widgets.brease.InfoBanner.Action" contentRefId="UserListContent" widgetRefId="ErrorInfoBanner">
<Method xsi:type="widgets.brease.InfoBanner.Action.Open" />
</Target>
</Action>
</EventHandler>
</EventBinding>
Additional information for the predefined text IDs
All text IDs are predefined in the TMX file and can be used. If languages other than English, French or German are required, they must be added and filled in by the user.
If a text ID is missing entirely, the widget will provide a default text. These standard texts are only available in English or German. If an entry for a language is missing, the fallback language is used.
Results
A successful attempt to delete a user when a user is selected can look like this:
An unsuccessful attempt to delete a user when no user is selected can look like this:
