Reusable UI Pattern? Web Blocks or...?

Hello,

I am working on the UI aspects of my project.  Is it best practice to create a module with web blocks that represent generic versions of my various pages and add modules for each UI section of my application to reference this "framework" module?  This way the UI stays consistent?  I am thinking that makes the most sense unless there is a better way.

And what happens down the road of I want to change my UI?  If I edit those web blocks will all of the dependent UI modules automatically update to this new format?  I know that means might need to fix a few breaks but just trying to architect something reusable in the future

Ivan Weiss wrote:

Hello,

I am working on the UI aspects of my project.  Is it best practice to create a module with web blocks that represent generic versions of my various pages and add modules for each UI section of my application to reference this "framework" module?  This way the UI stays consistent?  I am thinking that makes the most sense unless there is a better way.

And what happens down the road of I want to change my UI?  If I edit those web blocks will all of the dependent UI modules automatically update to this new format?  I know that means might need to fix a few breaks but just trying to architect something reusable in the future

Hi Ivan,

1-Creating a module with all the reusable web block inside it consider as a best practice.

in case of micro application, You should go with a separate theme application.

The micro application is something like you have a client for which you have to create more than 2 application with the same branding then you should go with a separate theme application and that case you have to take reference of theme application in all other application. 


2-If You edit those web blocks will all of the dependent UI modules automatically update to this new format?

No, As far I know, you have to update the references manually.


Hope this will be the answer to your Query.


Best Regards,

Pankaj


Ivan Weiss wrote:

Hello,

I am working on the UI aspects of my project.  Is it best practice to create a module with web blocks that represent generic versions of my various pages and add modules for each UI section of my application to reference this "framework" module?  This way the UI stays consistent?  I am thinking that makes the most sense unless there is a better way.

And what happens down the road of I want to change my UI?  If I edit those web blocks will all of the dependent UI modules automatically update to this new format?  I know that means might need to fix a few breaks but just trying to architect something reusable in the future


Hi Ivan,

1. Yes, with this your UI stays consistent.

2. If your UI changes(meaning you changed some thing in the web block),then It will exactly NOT automatically update. All you have to do is update the reference of the consumer applications/modules. You can either do it from service studio or from service center directly. 

I hope that helps.


Thanks,

Waseema.

Amal Raj wrote:

Hello Ivan,

Did you go through the OutSystems 4 Layer Canvas

https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/Designing_the_architecture_of_your_OutSystems_applications/01_The_4_Layer_Canvas

You could create a custom theme

https://www.outsystems.com/learn/lesson/1269/creating-a-custom-theme/



Yes, I went through the 4 layer canvas in a lot of detail.  It speaks to module seperation but not reusable UI patterns.  I am only creating one application for my company, so I do not need to create an entire custom theme.  I want to keep it simple.  But I do want pages to have similar look and feels throughout the design.

Waseema wrote:

Ivan Weiss wrote:

Hello,

I am working on the UI aspects of my project.  Is it best practice to create a module with web blocks that represent generic versions of my various pages and add modules for each UI section of my application to reference this "framework" module?  This way the UI stays consistent?  I am thinking that makes the most sense unless there is a better way.

And what happens down the road of I want to change my UI?  If I edit those web blocks will all of the dependent UI modules automatically update to this new format?  I know that means might need to fix a few breaks but just trying to architect something reusable in the future


Hi Ivan,

1. Yes, with this your UI stays consistent.

2. If your UI changes(meaning you changed some thing in the web block),then It will exactly NOT automatically update. All you have to do is update the reference of the consumer applications/modules. You can either do it from service studio or from service center directly. 

I hope that helps.


Thanks,

Waseema.


Waseema, so is there a way to maintain a consistent design change for future iterations?  For example, lets say I want to change the look of a button in the top right corner of my app?  If I change it in the web block in the future will all of the screens using that web block change?  Or no once they are added to a screen?

And what if I change the layout?  Lets say from a 2 column to a 3 column?  Will automatically all of my screens reflect that new information?


I am looking at creating a two column offset page.  For example on my CompaniesOverview Page the left column is going to have a list of people that are linked to the company.  On the right is going to be a tab structure with one tab for notes about the company and another tab for the details abotu the company.  This way I can add more functionality in the future.

I want to create a ProjectOverview Page with the exact same look.  The left column is going to have a list of people that are linked to the Project.  On the right is also going to be a tab structure with one tab for notes, another tab for sales opportunities within the project, another tab for other items within the project, etc.

But if I make a UI change to something I want it to continue to all of these pages so I dont have to edit a ton of pages in the future.

Ivan Weiss wrote:

Amal Raj wrote:

Hello Ivan,

Did you go through the OutSystems 4 Layer Canvas

https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/Designing_the_architecture_of_your_OutSystems_applications/01_The_4_Layer_Canvas

You could create a custom theme

https://www.outsystems.com/learn/lesson/1269/creating-a-custom-theme/



Yes, I went through the 4 layer canvas in a lot of detail.  It speaks to module seperation but not reusable UI patterns.  I am only creating one application for my company, so I do not need to create an entire custom theme.  I want to keep it simple.  But I do want pages to have similar look and feels throughout the design.

Hello Ivan

Based on your description, I believe what you need is a custom layout. (not a full fledged theme)

A layout defines the position and look and feel of the elements on the screen. 

A layout can be reused for screens which need to be consistent.  (for e.g in this layout you can define 2 column, 3 column etc, that your pages should have)

In this layout you can have placeholders for dynamic content also.

Now when you create specific screens you can set the layout of that screen to this specific layout. 

Also when you update a layout, all your screens will reflect the new layout.


Check the below link on how to build a custom layout

https://www.outsystems.com/learn/lesson/1276/creating-a-custom-layout/

Lastly your approach of building reusable web blocks is the recommended best practice. 


Waseema wrote:

Ivan Weiss wrote:

Hello,

I am working on the UI aspects of my project.  Is it best practice to create a module with web blocks that represent generic versions of my various pages and add modules for each UI section of my application to reference this "framework" module?  This way the UI stays consistent?  I am thinking that makes the most sense unless there is a better way.

And what happens down the road of I want to change my UI?  If I edit those web blocks will all of the dependent UI modules automatically update to this new format?  I know that means might need to fix a few breaks but just trying to architect something reusable in the future


Hi Ivan,

1. Yes, with this your UI stays consistent.

2. If your UI changes(meaning you changed some thing in the web block),then It will exactly NOT automatically update. All you have to do is update the reference of the consumer applications/modules. You can either do it from service studio or from service center directly. 

I hope that helps.


Thanks,

Waseema.

Hi there, 

Care with your second affirmation because It may lead to a misunderstood. If you change a web block, like a Preparation flow, Action flow etc you can use Service Studio or Service Center directly (that's correct) BUT if you change/add/remove an Input parameter to It you should use Service Studio to update the consumer, otherwise, the consumer will be broken.

Thanks,
Fernando Branco


Ivan Weiss wrote:

#1

Waseema, so is there a way to maintain a consistent design change for future iterations?  For example, lets say I want to change the look of a button in the top right corner of my app?  If I change it in the web block in the future will all of the screens using that web block change?  Or no once they are added to a screen?

#2 

And what if I change the layout?  Lets say from a 2 column to a 3 column?  Will automatically all of my screens reflect that new information?

#3

I am looking at creating a two column offset page.  For example on my CompaniesOverview Page the left column is going to have a list of people that are linked to the company.  On the right is going to be a tab structure with one tab for notes about the company and another tab for the details abotu the company.  This way I can add more functionality in the future.

I want to create a ProjectOverview Page with the exact same look.  The left column is going to have a list of people that are linked to the Project.  On the right is also going to be a tab structure with one tab for notes, another tab for sales opportunities within the project, another tab for other items within the project, etc.

But if I make a UI change to something I want it to continue to all of these pages so I dont have to edit a ton of pages in the future.

I'm not Waseema but I will give you my point of view

#1 

For instance, If you create a web block and then use It on 3 different screens, those screens(consumers) are dependent, which means if you change something on your weblock, those changes will be propagated to those consumers(you have to update them). Now, you may ask, "Can I created a weblock and apply a specific change to be display to a specific screen?" The answer is, yes you can but you have to add logic to it like an input parameter to identify with screen or something like that.

 #2

As above(#1), you can specify how the layout should behave with some inputs, for this case you could have an input parameter name "NumberOfColumns" and then based on It you could add logic to the web block to display the number of wanted columns.

#3

Looks like you want to make a template with 2 placeholders. I think that you need to analyze It case by case, if you reach a point that you have to do to a ton of specific changes to a certain layout maybe It's time to create a new one.

Amal Raj wrote:

Ivan Weiss wrote:

Amal Raj wrote:

Hello Ivan,

Did you go through the OutSystems 4 Layer Canvas

https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/Designing_the_architecture_of_your_OutSystems_applications/01_The_4_Layer_Canvas

You could create a custom theme

https://www.outsystems.com/learn/lesson/1269/creating-a-custom-theme/



Yes, I went through the 4 layer canvas in a lot of detail.  It speaks to module seperation but not reusable UI patterns.  I am only creating one application for my company, so I do not need to create an entire custom theme.  I want to keep it simple.  But I do want pages to have similar look and feels throughout the design.

Hello Ivan

Based on your description, I believe what you need is a custom layout. (not a full fledged theme)

A layout defines the position and look and feel of the elements on the screen. 

A layout can be reused for screens which need to be consistent.  (for e.g in this layout you can define 2 column, 3 column etc, that your pages should have)

In this layout you can have placeholders for dynamic content also.

Now when you create specific screens you can set the layout of that screen to this specific layout. 

Also when you update a layout, all your screens will reflect the new layout.


Check the below link on how to build a custom layout

https://www.outsystems.com/learn/lesson/1276/creating-a-custom-layout/

Lastly your approach of building reusable web blocks is the recommended best practice. 


Perfect, I think this was what I was looking for!  And funny as that course was one I was just about to start thinking it might lead to my answer.


So I can create a layout with a mix of some standard Ui content and otherwise placeholders.  And if I ever change this layout all screens utilize get that update which is great.

I'll create a module in my application for UI_Layouts and use that as a dependency this way i can keep them in one place.