Can we explore more advanced functions?
Create reusable custom Polymer components by building card view components with properties, importing them into main views, passing data through attributes using dash-case to camelCase mapping, and displaying images from business object records.
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 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.
JS File > Custom Component
mixinBehaviors import (line 1) and the
TriPlatViewBehavior import (line 3) are not required, but are shown for
demonstration purposes. A future release might make this situation more strict. In such a case, the
JayUxPeopleCard class (line 5) can be simplified to: class JayUxPeopleCard
extends PolymerElement {
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.)
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 adjacent to 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.
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 start to import the custom component:
import "./jay-ux-people-card.js";
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.
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
Maximo® Real Estate and
Facilities
<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 start to import the
Maximo Real Estate and
Facilities 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
Maximo Real Estate and
Facilities
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
