Can we add other types of fields and buttons?
Add text area, number, and Boolean fields to JavaScript views using Polymer elements like paper-textarea, paper-input with validation patterns, and paper-checkbox for interactive form components with material design styling.
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 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.)
NPM > tri-template and tri-proxy
If needed, add the import line at the beginning of your JS file to import the
Maximo® Real Estate and
Facilities
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 start to import the Polymer element:
import "../@polymer/paper-input/paper-textarea.js";
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 start 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>
<paper-input> element is the
Maximo Real Estate and
Facilities
<triplat-paper-input> component which includes built-in number
validation.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?
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 start 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
