Extending UX (Polymer 3)

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 JavaScript (JS) files. In turn, each JS file can be made up of the following components:

• TRIRIGA components
• Custom components
• Polymer elements
• Traditional elements

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 tri-template command if needed, and run the tri-proxy command to preview your changes. In our example, we'll run tri-template with starter-v3 and jay-uxbo-view2 to add a new JS view file. Then we'll run tri-proxy with http://beta.tririga-dev.com/p/web/jayUXBOApp2. (At any time, you can also run tri-deploy to push your updated view file to the server.)

c. NPM > tri-template and tri-proxy

If needed, add the import line at the top of your JS file 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 JS 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 import line at the top to import the Polymer element: import "../@polymer/paper-input/paper-textarea.js";

d. JS File > Import paper-textarea

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

e. JS File > Declare paper-textarea

Save the file and return to 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 > Text Area

Add a number field to your JS 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 tri-proxy command is running in the command prompt. (At any time, you can also run tri-deploy to push your updated view file to the server.)

First, add the import line at the top to import the Polymer element: import "../@polymer/paper-input/paper-input.js";

g. JS 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. JS File > Declare paper-input

Save the file and return to 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 JS 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 tri-proxy command is running in the command prompt. (At any time, you can also run tri-deploy to push your updated view file to the server.)

First, add the import line at the top to import the Polymer element: import "../@polymer/paper-checkbox/paper-checkbox.js";

k. JS File > Import paper-checkbox

Next, add the <paper-checkbox> tag to declare the Polymer element: <paper-checkbox checked="{{data.triReservableBL}}">Reservable</paper-checkbox>

l. JS File > Declare paper-checkbox

Save the file and return to 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

Add an action dialog to your JS file

This time, we'll add the Polymer <paper-button> tag for a button with a ripple effect and TRIRIGA <triblock-popup> 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 import lines at the top to import both components: import "../@polymer/paper-button/paper-button.js"; and import "../triblock-popup/triblock-popup.js";

a. JS File > Import paper-button and triblock-popup

Next, add the <paper-button> tag and <triblock-popup> tag to declare the components. For the UX rocks! button, insert the attribute on-tap="_uxRocksTapHandler" to call a JavaScript method _uxRocksTapHandler when the button event is detected.

b. JS File > Declare paper-button and triblock-popup

Then, insert the JavaScript method _uxRocksTapHandler at the bottom.

c. JS File > Insert _uxRocksTapHandler

Save the file and return to 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 JS file

This time, we'll add the TRIRIGA <triblock-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 (or 7000 milliseconds). Like before, make sure the tri-proxy command is running in the command prompt. (At any time, you can also run tri-deploy to push your updated view file to the server.)

First, add the import line at the top to import the TRIRIGA component: import "../triblock-toast/triblock-toast.js";

e. JS File > Import triblock-toast

Next, update the Polymer <paper-button> tags as follows. For the No button, insert the attribute on-tap="_noTapped" to call a JavaScript method _noTapped when the button event is detected. Likewise, for the Yes button, insert on-tap="_yesTapped".

Then, add the <triblock-toast> tag to declare the TRIRIGA component: <triblock-toast id="toast" type="[[toastType]]" title="[[toastTitle]]" text="[[toastText]]" duration="7000"></triblock-toast>

f. JS File > Update paper-button and declare triblock-toast

Then, insert the JavaScript methods _noTapped and _yesTapped at the bottom.

g. JS File > Insert _noTapped and _yesTapped

Save the file and return to the UX view. Feel free to click the UX rocks! button, and then the No and Yes buttons. Do you see your toasts? Pretty sweet!

h. UX App > Toast Popup with Warning Style

i. UX App > Toast Popup with Success Style

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=14248555 in its related URL. Enter your specific 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 tri-template command if needed, and run the tri-proxy command to preview your changes. In our example, we'll run tri-template with starter-v3 and jay-ux-people-view to add a new JS view file. Then we'll run tri-proxy with http://beta.tririga-dev.com/p/web/jayUXPeopleApp. (At any time, you can also run tri-deploy to push your updated view file to the server.)

e. NPM > tri-template and tri-proxy

If needed, add the import line at the top of your JS file 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 import line at the top to import the Polymer element: import "../@polymer/paper-input/paper-input.js";

f. JS File > Import paper-input

Next, add the <paper-input> tags to declare the Polymer elements:

<paper-input label="First Name" floating-label value="{{data.triFirstNameTX}}"></paper-input>

<paper-input label="Last Name" floating-label value="{{data.triLastNameTX}}"></paper-input>

g. JS File > Declare paper-input

Save the file and return to 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 tri-proxy command is running in the command prompt. (At any time, you can also run tri-deploy to push your updated view file to the server.)

First, add the import line at the top to import the Polymer element: import "../@polymer/paper-button/paper-button.js";

l. JS File > Import paper-button

Next, add the <paper-input> tag to declare the Polymer element: <paper-input label="Nick Name" floating-label value="{{data.triNickNameTX}}"></paper-input>

Then, add the <paper-button> tag to declare it and call a JavaScript method _update when the button is tapped: <paper-button raised on-tap="_update">Trigger now!</paper-button>

m. JS File > Declare paper-input and paper-button

Then, insert the JavaScript method _update at the bottom with your specific specId.

n. JS File > Insert _update

Save the file and return to the UX view. Click the Trigger now! button. 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

Start a card view as a custom component

For our next exercise, we'll prepare a new JS file in the same folder as your existing JS file. But don't move it into the same folder yet! First, edit the new JS file in a different folder to begin with the simplest running design. This new JS file will start your custom component.

In our example, we'll name the new JS file jay-ux-people-card.js for our card-view custom component, and edit its JS to look like the following code, very similar to that of a regular starter view.

a. JS File > Custom Component

Next, after you've prepared your JS file, open the command prompt in your selected folder, and run the tri-proxy command to preview your changes. In our example, we'll go to the same previous jay-ux-people-view folder. Then we'll run tri-proxy with the same previous http://beta.tririga-dev.com/p/web/jayUXPeopleApp. (At any time, you can also run tri-deploy to push your updated view file to the server.)

b. NPM > tri-proxy > Preview View

This time, you're ready to move your new JS 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\polymer-3 folder contains the jay-ux-people-view folder, which contains the existing jay-ux-people-view.js file from the last exercise. Go ahead and move the new JS file jay-ux-people-card.js beside the existing JS file in the same folder. The next time you save the moved JS file, notice how the tri-proxy tool detects it and reloads your preview.

c. NPM > tri-proxy > Reload View

Add a card view component to your JS file

This time, we'll add a custom tag to our existing JS 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.js file.

First, add the import line at the top to import the custom component: import "./jay-ux-people-card.js";

d. JS 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. JS File > Declare Custom Component

Save the file and return to 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.js 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 static function.

g. JS File > Insert peopleData

Next, replace the placeholder text with peopleData values.

h. JS File > Add peopleData Values

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.js 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. JS File > Add people-data Attribute

Why do we need a dash in the 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 return to the UX view. Do you see your expanded custom component? Now it's time to display a 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).

This time, we'll add the TRIRIGA <triplat-image> tag to our component jay-ux-people-card.js to grab the instance data triImageIM from an existing people record, the same record from previous exercises.

First, add the import line at the top to import the TRIRIGA element: import "../triplat-image/triplat-image.js";

k. JS File > Import triplat-image

Next, add the <div> tag if needed, and add the <triplat-image> tag to declare the TRIRIGA element: <triplat-image src="[[peopleData.triImageIM]]"></triplat-image>

l. JS File > Declare triplat-image

Save the file and return to the UX view. Do you see your completed custom component? Now you're ready to reuse it in other applications!

m. UX App > Completed Custom Component