IBM Jay.

Manaloto

Search Submit IBM

Profiles Communities Apps Share

Wikis This Wiki Search

IBM TRIRIGA Following Actions Wiki Actions

TRIRIGA Wiki Home You are in: IBM TRIRIGA > UX Framework > UX App Building > Extending UX

Facilities Management …
Extending UX
Facilities Maintenance Like | Updated October 10, 2018 by Jay.Manaloto | Tags: None Add tags

Ener…
Environmental & Ener… Edit Page Actions

Real Estate Management

Manag…
Capital Project Manag…

Integrator-Publis…
CAD Integrator-Publis…

Connect…
IBM TRIRIGA Connect…
See the UX Article 3 "Extending UX" PDF for previous versions of this content. What is UX? The standard definition of "UX" is
IBM TRIRIGA Anywhere
user experience. But for simplicity, I'll refer to the TRIRIGA UX framework as "UX".
Applicati…
IBM TRIRIGA Applicati…

Release Notes
Extending UX: Adding more functionality to your IBM TRIRIGA UX application

Media Library 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
Best Practices
ways to manipulate records.
Upgrading What are the UX model and view components?
What are the basic steps to build a UX application?
Troubleshooting
Can we add other types of fields and buttons?
UX Framework
Can we display dialogs and other messages?
Can we display and modify existing records?
UX Articles Can we explore more advanced functions?
Still want more?
UX App Building

Introducing UX What are the UX model and view components?

Implementing UX To refresh our memories, if we redraw the basic MVC diagram with our decoupled metadata approach, our UX framework might
▪ Extending UX
look like this.

(…
Implementing UX (…

(Poly…
Extending UX (Poly…

P…
Converting UX to P…

(Poly…
Bundling UX (Poly…

(…
Commanding UX (…

UX Perceptive Apps

To…
UX in Foundation To…

UX App Designer Tools

UX Best Practices

UX in Foundation Docs

UX Component Docs

UX Tips & Tricks

UX Videos

UX Archives

New Page

Index

Members

Trash

Tags
Find a Tag
Model components.
analysis application
availability_section best_practices If you remember, this is where you can define your models in whatever way you see fit to fulfill your business needs. First, you
cad change_management must define your models before you can develop your views.
changes compare
Each model can be made up of the following components:
compare_revisions
customizations customize Data Sources.
database db2 exchange
Child Data Sources.
find_available_times gantt_chart
gantt_scheduler group Related Data Sources.
memory_footprint modifications
modify object_label Data Source Fields.
object_revision
Data Source Actions.
operating_system oracle
performance platform
View components.
problem_determination reports
reserve reserve_performance
After your models are in place, this is where you can design your views in whatever way you require to satisfy your business
revision revisioning
scenarios. Even better, you're free to design any number of views for each model.
single_sign-on snapshot space
sql_server sso support system
Each view is made up of one or more HTML files. In turn, each HTML file can be made up of the following components:
system_performance TRIRIGA components.
tags: track_customizations
Custom components.
tririga troubleshoot tuning
upgrade ux version versioning
Polymer elements.

Cloud List Traditional elements.

Members 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.

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.

Data Source Metadata.

We'll add the fields to the data source by using Quick Add.

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.

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">

HTML File > Import paper-textarea.

Next, add the <paper-textarea> tag: <paper-textarea label="Description" floating-label value="{{data.triDescriptionTX}}">

</paper-textarea>

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?

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">

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>

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?

UX App > Input with Error Message.

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">

HTML File > Import paper-checkbox.

Next, add the <paper-checkbox> tag to declare it: <paper-checkbox checked="

{{data.triReservableBL}}">Reservable</paper-checkbox>

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?

UX App > Check Box.

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.

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.

HTML File > Declare paper-button and paper-dialog.

Then, insert the JavaScript method ontapHandler within the <script> tag.

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?

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">

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>

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!

UX App > Toast Popup.

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.

Data Source Metadata.

We'll add the fields to the data source by using Quick Add.

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.

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.

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.

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">

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>

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?

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.

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.

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.
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">

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>

HTML File > Declare paper-input and paper-button.

Insert the JavaScript method updateActionHandler within the <script> tag.

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!

UX App > Input with No Nick Name.

UX App > Input with Modified Nick Name.

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.

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.

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.

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">

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>

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?

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.

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.

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.

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!

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>

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!

UX App > Completed Custom Component.

 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!

Background Q & A.

Question Answer

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
How do we build supports the view.
applications in the new
MVC framework? 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.

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?
How do we simplify the
interface or view? 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.

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
What happens to our new role-based interfaces are applied and how much the application is customized.
existing customers? 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.

Next >

Comments (0) Versions (15) Attachments (49) About

There are no comments.

Add a comment

Feed for this page | Feed for these comments

Contact Privacy Terms of use Accessibility Report abuse Cookie Preferences