Can we dig deeper into the UX view?
Design views using JavaScript files composed of Maximo® Real Estate and Facilities components, custom components, Polymer elements, and traditional HTML elements with CSS styling, connecting views to models through model-and-view metadata and application metadata for flexible data sourcing.
Sure! As I mentioned earlier, the view is used to render the interfaces or forms. 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:
- Maximo Real Estate and Facilities components
- Custom components
- Polymer elements
- Traditional elements
Before we peek at a few screenshots, here are some deeper descriptions.
Component Descriptions
- Maximo Real Estate and Facilities Components
- You can add Polymer-based components provided by
Maximo Real Estate and
Facilities to
assemble all of the necessary data and metadata, or enable field-level interactions or information,
in a rendered view. These
Maximo Real Estate and
Facilities components include a graphic and
search field.
Example tags include
<triplat-ds>,<triplat-graphic>,<triplat-search-input>, and<triblock-open-page>.To access the full list of Maximo Real Estate and Facilities components and their related documentation, enter the following URL address: https://<workspace_id>.facilities.<mas_domain>/p/web/doc. Where <workspace_id> and <mas_domain> are the values for your Maximo Real Estate and Facilities environment. For example, just add /p/web/doc.
- Custom Components
- You can add Polymer-based components customized by yourself to enable field-level interactions or
information in a rendered view. These components might include a custom search field or custom
people card view.
Example tags might include
<custom-search-input>,<my-paper-button>, and<jay-ux-people-card>. - Polymer Elements
- Not only can you add components provided by
Maximo Real Estate and
Facilities or customized
by yourself, you can also add elements provided by the Polymer library to provide field-level
interactions or information in a rendered view. These Polymer elements include a check box, data
field, number field, search field, and text field.
- Iron Elements: This type represents the core elements that don't express a specific visual design style or language.
- Paper Elements: This type expresses the material design language by Google. Examples
include
<paper-material>,<paper-input>, and<paper-button>. - Other Elements: Other types like Neon elements represent animation, and additional functions.
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.
- Traditional Elements
- You can also add traditional HTML elements such as containers, headings, or paragraphs. In
addition, you can apply CSS styles to these traditional HTML elements as well as
Maximo Real Estate and
Facilities elements and Polymer elements.
Example tags include
<div>,<h1>, and<p>.
Next, here's an example of a blank view metadata form, where you define your view and add its JavaScript (JS) files. Later, we'll learn to add JS files.
Web View Metadata
Here's an example of a blank model-and-view metadata form, where you tie your view to a model, and define your view type. More about this later.
Model and View Metadata
Finally, here's an example of a blank application metadata form, where you define your application, app type, and app (source) name, such as a model-and-view. Why will UX use an additional metadata layer to connect the model-and-view to the application? Flexibility. This additional layer allows the application to pull data from either a UX or non-UX source if needed.
Application Metadata
