Extending UX
Still hungry? If you're ready for a third serving, I admire your appetite! In my first two articles, we explored the concepts and built a simple UX application. This time, we'll extend our simple application with new fields, buttons, dialogs, toasts, and ways to manipulate records.
Contents
- I. What are the UX model and view components?
- II. What are the basic steps to build a UX application?
- III. Can we add other types of fields and buttons?
- IV. Can we display dialogs and other messages?
- V. Can we display and modify existing records?
- VI. Can we explore more advanced functions?
- VII. Still want more?
Extending UX: Adding more functionality to your IBM TRIRIGA UX application
By Jay Manaloto
I. What are the UX model and view components?
To refresh our memories, if we redraw the basic MVC diagram with our decoupled metadata approach, our UX framework might look like this.
a. Model components
If you remember, this is where you can define your models in whatever way you see fit to fulfill your business needs. First, you must define your models before you can develop your views.
Each model can be made up of the following components:
- Data Sources
- Child Data Sources
- Related Data Sources
- Data Source Fields
- Data Source Actions
b. View components
After your models are in place, this is where you can design your views in whatever way you require to satisfy your business scenarios. Even better, you're free to design any number of views for each model.
Each view is made up of one or more HTML files. In turn, each HTML file can be made up of the following components:
- TRIRIGA components
- Custom components
- Polymer elements
- Traditional elements
II. What are the basic steps to build a UX application?
If you also remember, this is where you built a simple 3-field 3-button application by (1) defining a model with a single data source, (2) defining the view connections to a model-and-view and application, and (3) defining and designing a view with a single HTML file.
Here are the basic steps:
- Define your model
- Optional: Add the business object
- 1: Add the model
- 2: Add the data source
- 3: Add a few fields for your data source
- Define your view connections
- 4: Add the view
- 5: Add the model-and-view
- 6: Add the application for your model-and-view
- Define your view
- 7: Set up the view sync
- 8: Add the HTML file for your view
- 9: Access the application
- Design your view
- 10: Start the view sync
- 11: Add a paragraph element to your HTML file
- 12: Add a few field elements to your HTML file
- 13: Add a few button elements to your HTML file
III. Can we add other types of fields and buttons?
Sure! At this point, you should have a better idea of the application building process. For our exercise, prepare your model with a data source that contains the following field types: Text (like triDescriptionTX), Number (like triAreaNU), and Boolean (like triReservableBL).
In our example, we'll name the model jayUXBOModel2 and name the data source jayUXBODataSource2.
a. Data Source Metadata
We'll add the fields to the data source by using Quick Add.
b. Data Source Fields
Similarly, we'll name the view jayUXBOView2 (and jay-uxbo-view2), name the model-and-view jayUXBOModelAndView2, and name the application jayUXBOApp2 with the label Jay UX BO Application 2.
Next, after you've prepared your model and view connections, open the command prompt in your selected folder, run the addview command if needed, and run the sync command to sync your changes. In our example, we'll run addview with jay-uxbo-view2 to add a new HTML view file.
c. WebViewSync > Add View and Sync
If needed, add the <link> tag at the top to import the TRIRIGA
triplat-ds (data source) component and add the <triplat-ds> tag
to declare it.
Add a text area field to your HTML file
This time, we'll add the Polymer <paper-textarea> tag for a multi-line text
field based on the material design language by Google. If you have any questions about Polymer, its
concepts, or its elements, feel free to check out the Polymer website at www.polymer-project.org.
First, add the <link> tag at the top to import the Polymer element:
<link rel="import" href="../paper-input/paper-textarea.html">
d. HTML File > Import paper-textarea
Next, add the <paper-textarea> tag: <paper-textarea
label="Description" floating-label
value="{{data.triDescriptionTX}}"></paper-textarea>
e. HTML File > Declare paper-textarea
Save the file and refresh the UX view. Do you see your field? If you do, why not type a few lines? Notice how the field expands automatically?
f. UX App > Starter View
Add a number field to your HTML file
This time, we'll add the Polymer <paper-input> tag for a 5-decimal-place
number field based on the material design language by Google. Like before, make sure the
sync command is running in the command prompt.
First, add the <link> tag at the top to import the Polymer element:
<link rel="import" href="../paper-input/paper-input.html">
g. HTML File > Import paper-input
Next, add the <paper-input> tag to declare the Polymer element:
<paper-input label="Decimal" floating-label auto-validate
pattern="[0-9]*\.[0-9][0-9][0-9][0-9][0-9]" error-message="Invalid format for a number with 5
decimal places of precision!" value="{{data.triAreaNU}}"></paper-input>
h. HTML File > Declare paper-input
Save the file and refresh the UX view. Do you see your field? Why not type a few numbers? Notice how the error message appears when needed?
i. UX App > Input with Error Message
j. UX App > Input without Error Message
Add a Boolean button to your HTML file
This time, we'll add the Polymer <paper-checkbox> tag for a button that can
be either checked or unchecked, based on the material design language by Google. Like before, make
sure the sync command is running.
First, add the <link> tag at the top to import the Polymer element:
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
k. HTML File > Import paper-checkbox
Next, add the <paper-checkbox> tag to declare it:
<paper-checkbox
checked="{{data.triReservableBL}}">Reservable</paper-checkbox>
l. HTML File > Declare paper-checkbox
Save the file and refresh the UX view. Do you see your button? If you do, why not add a couple
more <paper-checkbox> tags on your own?
m. UX App > Check Box
IV. Can we display dialogs and other messages?
Why not? Like before, open the command prompt in your selected folder, run the addview command if needed, and run the sync command to sync your changes. In our example, we'll keep going with jay-uxbo-view2.
Add an action dialog to your HTML file
This time, we'll add the Polymer <paper-button> tag for a button with a
ripple effect and Polymer <paper-dialog> tag for a popup dialog box, both based
on the material design language by Google. For our exercise, this dialog will be triggered from a
button, and will offer two button actions.
First, add the <link> tags at the top to import both Polymer elements.
a. HTML File > Import paper-button and paper-dialog
Next, add the <paper-dialog> tag beneath the selected
<paper-button> tag. In this case, the UX rocks! button.
Then, to call a JavaScript method ontapHandler when the button event is caught,
wrap the <section on-tap="ontapHandler"> tag around the
<paper-button> tag.
b. HTML File > Declare paper-button and paper-dialog
Then, insert the JavaScript method ontapHandler within the
<script> tag.
c. HTML File > Insert ontapHandler
Save the file and refresh the UX view. Do you see your button? If you do, feel free to click it. Do you see your action dialog? Pretty cool, huh?
d. UX App > Button and Action Dialog
Add a toast popup message to your HTML file
This time, we'll add the Polymer <paper-toast> tag for a subtle notification
that pops up like toast, based on the material design language by Google. For our exercise, this
toast will be triggered from a button, and will show for 7 seconds. Like before, make sure the
sync command is running.
First, add the <link> tag at the top to import the Polymer element:
<link rel="import" href="../paper-toast/paper-toast.html">
e. HTML File > Import paper-toast
Next, insert onclick="document.querySelector('#toast1').show()" within the
selected <paper-button> tag. In this case, the Yes
button. Then, add the <paper-toast> tag: <paper-toast
id="toast1" text="You've confirmed that UX rocks." duration="7000" style="right:12px;
left:initial;"></paper-toast>
f. HTML File > Declare paper-toast
Save the file and refresh the UX view. Feel free to click the UX rocks! button, and then the Yes button. Do you see your toast? Pretty sweet!
g. UX App > Toast Popup
V. Can we display and modify existing records?
Yes, we can! For our next exercise, prepare your model with a data source that (1) has the BUSINESS_OBJECT data source type, triPeople module, and triPeople business object, and that (2) contains the following fields: triFirstNameTX (First Name) and triLastNameTX (Last Name).
In our example, we'll name the model jayUXPeopleModel and name the data source jayUXPeopleDataSource.
a. Data Source Metadata
We'll add the fields to the data source by using Quick Add.
b. Data Source Fields
Similarly, we'll name the view jayUXPeopleView (and jay-ux-people-view), name the model-and-view jayUXPeopleModelAndView, and name the application jayUXPeopleApp with the label Jay UX People Application.
c. Model and View Metadata
Since we want to pull data from an existing people record, prepare your application with an
Instance ID that represents the specId of that record. To be
clear, this ID isn't the ID that appears in the people form, it's the specId that
appears in the URL of the people record. For example, a people record with an
ID of 1000001 might have a specId=127333408 in its
related URL. Enter this specId as the Instance ID for your
application.
d. Application Metadata
Next, after you've prepared your model and view connections, open the command prompt in your selected folder, run the addview command if needed, and run the sync command to sync your changes. In our example, we'll run addview with jay-ux-people-view to add a new HTML view file.
e. WebViewSync > Add View and Sync
If needed, add the <link> tag at the top to import the TRIRIGA
triplat-ds (data source) component and add the <triplat-ds> tag
to declare it.
Display data from an existing record
This time, we'll add more Polymer <paper-input> tags to grab the instance
data triFirstNameTX and triLastNameTX from the
existing people record.
First, add the <link> tag at the top to import the Polymer element:
<link rel="import" href="../paper-input/paper-input.html">
f. HTML File > Import paper-input
Next, add the <paper-input> tags to declare the Polymer elements:
<paper-input ...
value="{{data.triFirstNameTX}}"></paper-input>
<paper-input ...
value="{{data.triLastNameTX}}"></paper-input>
g. HTML File > Declare paper-input
Save the file and refresh the UX view. Do you see your fields? Do you see the corresponding instance data from your people record? Nice, huh?
h. UX App > Input with Instance Data
Modify data by triggering a workflow
For our next exercise, prepare a workflow with Synchronous concurrence, Permanent data, the triPeople module, and the triPeople business object. Add a Modify Records task that will map to and from the triPeople business object. Edit the map to modify the triNickNameTX (Nick Name).
In our example, we'll name the workflow jayUX - Save - Perm and modify the triNickNameTX to Jayman. Then Publish the workflow.
i. Workflow > Modify Records Task
Next, return to your data source from the last exercise, and (1) add the field triNickNameTX. Then, (2) add an action group, and (3) add an action that has the WORKFLOW action type, triPeople module, triPeople business object, and workflow name that you defined earlier.
j. Data Source Action Group Metadata
In our example, we'll name the action group jayUXPeopleActionGroup, name the action jayUXPeopleActionSavePerm, and name the workflow jayUX - Save - Perm. This hooks up your workflow into your data source. Finally, Save & Close your action, action group, and data source.
k. Data Source Action Metadata
This time, we'll add one more Polymer <paper-input> tag to hold the instance
data triNickNameTX and Polymer <paper-button> tag to
trigger a workflow that modifies the triNickNameTX from null to
Jayman. Like before, make sure the sync command is running in the command
prompt.
First, add the <link> tag at the top to import the Polymer element:
<link rel="import" href="../paper-button/paper-button.html">
l. HTML File > Import paper-button
Next, add the <paper-input> tag to declare the Polymer element:
<paper-input ...
value="{{data.triNickNameTX}}"></paper-input>
Then, add the <paper-button> tag to declare it and call a JavaScript method
updateActionHandler when the button is tapped: <paper-button
raised on-tap="updateActionHandler">Trigger now!</paper-button>
m. HTML File > Declare paper-input and paper-button
Insert the JavaScript method updateActionHandler within the
<script> tag.
n. HTML File > Insert updateActionHandler
Save the file and refresh the UX view. Click the Trigger now! button and refresh again. Do you see your modified instance data? Pretty nice!
o. UX App > Input with No Nick Name
p. UX App > Input with Modified Nick Name
VI. Can we explore more advanced functions?
Maybe a few more? At this point, you should have an even better idea of how UX applications are built and how UX views are designed with Polymer components. But what about designing a view with your own customized reusable component? Since you're already here, why not?
Start a card view as a custom component
For our next exercise, we'll prepare a new HTML file in the same folder as your existing HTML file. But don't move it into the same folder yet! First, edit the new HTML file in a different folder to begin with the simplest running design. This new HTML file will start your custom component.
In our example, we'll name the new HTML file jay-ux-people-card.html for our card-view custom component, and edit its HTML to look like this.
a. HTML File > Custom Component
Next, after you've prepared your HTML file, open the command prompt in your selected folder, and run the sync command to sync your changes.
b. WebViewSync > Sync
This time, you're ready to move your new HTML file. After we move this file, and hook it up into your main view, we can expand the component.
In our example, the C:\tririga_ux\ux_server folder contains the jay-ux-people-view folder, which contains the existing jay-ux-people-view.html file from the last exercise. Go ahead and move the new HTML file jay-ux-people-card.html beside the existing HTML file in the same folder.
Notice how the WebViewSync tool detects and pushes the new HTML file.
c. WebViewSync > Push
Add a card view component to your HTML file
This time, we'll add a custom tag to our existing HTML file so it can grab the new custom
component. In our example, we'll add a custom <jay-ux-people-card> tag to our
existing jay-ux-people-view.html file.
First, add the <link> tag at the top to import the custom component:
<link rel="import" href="jay-ux-people-card.html">
d. HTML File > Import Custom Component
Next, add the <jay-ux-people-card> tag to declare the custom component:
<jay-ux-people-card></jay-ux-people-card>
e. HTML File > Declare Custom Component
Save the file and refresh the UX view. Do you see your new custom component? Now that it's hooked up, we can expand it! Sweet, huh?
f. UX App > Custom Component
Expand your card view component
This time, we'll add a simple peopleData property to our component
jay-ux-people-card.html to show that we can use component properties. Like
before, we'll also add instance data triFirstNameTX and
triLastNameTX from an existing people record, the same record from previous
exercises.
First, insert the peopleData property within the <script>
tag.
g. HTML File > Insert peopleData
Next, replace the placeholder text with peopleData values and a profile image.
Ideally, the image data should be pulled from an existing people record. But for now, we'll add the
profile image jay-profile.png locally. Go ahead and move the profile image to
the same jay-ux-people-view folder.
h. HTML File > Add peopleData Values and Profile Image
At this point, how do you pass the model data values from your main view to the
peopleData values in your custom component? Easy! In our example, we'll return to
our main jay-ux-people-view.html file, and add the attribute
people-data="{{data}}" to our custom <jay-ux-people-card> tag.
This will assign data values to the peopleData property.
i. HTML File > Add people-data Attribute
Why do we need a dash in the HTML tag attribute people-data instead of simply
using peopleData like the component property? Well, Polymer maps any attribute
name with dashes to the corresponding property name by automatically converting attribute
dash-case to property camelCase.
Save the file and refresh the UX view. Do you see your expanded custom component? Now it's time to replace the local profile image!
j. UX App > Expanded Custom Component
Display image data from an existing record
Before we forget, return to your existing model and data source from the last exercise, and add the field triImageIM (Image).
If you remember, we added the profile image jay-profile.png locally. This
time, we'll replace it and add the TRIRIGA
<triplat-image> tag to our component
jay-ux-people-card.html to grab the instance data
triImageIM from an existing people record, the same record from previous
exercises.
First, add the <link> tag at the top to import the TRIRIGA element: <link
rel="import" href="../triplat-image/triplat-image.html">
Next, add the <triplat-image> tag to declare the TRIRIGA element:
<triplat-image
src="{{peopleData.triImageIM}}"></triplat-image>
k. HTML File > Import and Declare triplat-image
Save the file and refresh the UX view. Do you see your completed custom component? Now you're ready to reuse it in other applications!
l. UX App > Completed Custom Component
VII. Still want more?
If you have any questions about UX that weren't answered in this article, feel free to reach out to your IBM TRIRIGA representative or business partner. In the meantime, here are some more background questions and answers from my previous articles that might help to fill in the gaps or give you a better idea of what we're trying to do. In any case, stay tuned!
a. Background Q & A
| Question | Answer |
|---|---|
| How do we build applications in the new MVC framework? |
While we can't promise any specific dates, we plan to develop a new "model designer" or "model builder" metadata construct that supports the model. Similarly, we plan to develop a new "view designer" or "view builder" metadata construct that supports the view. Fortunately, we don't need to develop a new metadata construct for the controller since existing workflows and state families can already serve this function. Meanwhile, if we store the new platform metadata as records that can be accessed through forms, we can more quickly react to business requirements and add features. |
| How do we simplify the interface or view? |
Our existing technology ties forms to "things" like people and locations. So why not change the pattern so that views are tied to "actions" like creating and submitting requests? This change could be accomplished by designing views that are specific to a user role. Then we could still reuse our existing business objects and workflows to support the new role-based interfaces. |
| What happens to our existing customers? |
Because the new views will be "bolt-on" interfaces that are "bolted onto" existing applications, customers who don't choose the new MVC framework won't be affected. But for customers who choose the new framework, results could vary depending on how new role-based interfaces are applied and how much the application is customized. Fortunately, a flexible MVC model would offer customers a more efficient customization and upgrade strategy. For example, customers could add their own business objects instead of adding fields to our shipped business objects. This scenario would be easier to track during upgrade. |