UI Builder (Part 2): Understand like a 5 year old

So here we are. Part 2 of the fantastic tool called "UI Builder".

This article covers the "pages" - which are responsible for building an experience for the App.

What are Pages?

Primitive web developers can compare pages to web pages we had in old times. An app has an experience - e.g. Portal/Workspace or a Mobile experience. And these experiences are a collection of pages.

Tip: Most of the time we usually we will be focused on Workspace experience.

A page has a URL, it has parameters (optional as well as mandatory ones) and variants (different flavors of pages for different audiences)

Tip: Observe in screenshot above - how the parameters (mandatory or optional ones) are passed into a URL. Be very careful with the case sensitivity of the parameters you pass as parameters. 'sysid' and 'sysId' mean different stuff.

Comment below on this article as to what all parameters you have used till now.

• Mandatory parameters: Without even passing them - you can't even test the page in UI Builder.
• Optional parameters: They are appended to the URL as params.

The real fun in using UI Builder is configuring workspace experiences and Mobile one (you will love it).

Page Templates - Lets talk about them

Now this is a catchy stuff where you might be wondering if you want to use the OOTB pre defined page templates and limit your curiosity to customize

OR

copy the pages and customize as much as possible (on make your own version)

Believe me - the tradeoff depends on the extend of customization needed for the client requirements which cannot be suffice by the pre-built ones.

Tip: Try all the templates and get a feel of how they look like and behave.

What's inside pages?

Pages are a collection of Components (we can call them "UI elements too" from our times)!!

Now the trick here is how to use a component which fits best to your needs. Its up to a developer to decide to make that choice. However Now Components Library is a good resource to explore and try out the "Playground" feature.

Example of this the 'List' and 'Simple list' - it all depends on the flexibility to use the features.

Another great tip to remember here from component point of view is to use everything inside Containers - and how it helps?

Well first - it helps to keep everything organized in your page and secondly - it allows for the flexibility to change layouts into sections whenever you wanna fit in more components.

Note: You may sometime notice that the 3 dots in the Variants and Content area may not work. There are alternate controls available in canvas area and under "Edit Variant settings" for this. I too find this a little buggy sometimes. If you have ever experienced it, then do post it in comments.

What are page variants?

So a page can have different looks to it for different audiences or can be presented alternative for a similar set of audience.

Compare this with a catalog item (analogous to a page) and the user criteria's we add to it (analogous to an audience).

The best thing I like about variant is the option of "Duplicate a variant" which provides a baseline to change the looks rather than staring afresh.

Example of this could be "Create Record" and "Update Record" page with almost similar fields.

For choosing the different variants of same page to display between same set of audience, choose the combination of conditions and order.

Point to remember: As of this writing, I do not see any option of adding the parameters to an already created page. Please comment below if you have come across for it.

Here is the link to my first post Part 1 of UI Builder (in case you missed it)

Other resources:

Hope this article helps you in understanding of building and tweaking the pages . Lets cover some bit more in Part 3 of this series where I will be covering the "Events in Components". Stay tuned and Happy Learning!!

If you LIKE this article, do post your comments and "Buy me a coffee here"