Can we add other types of fields and buttons?
Add text area, number, and Boolean fields to HTML 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 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 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 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 start 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>
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 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?
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 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
