Customize the Nuxeo Platform UI for the Best End User Experience


Tue 23 June 2015 By Anne Jubert

Customizability is one of the core aspects of the Nuxeo Platform. Like most other features, the User Interface can be customized too to get the look and functionality you want your end users to have. To make things quick and easy the Nuxeo Platform provides a lot of predefined materials for customizing the UI.

The first thing you should know is that there is a “Nuxeo UI Style Guide” to help you easily make UI changes that aligns with the Nuxeo Platform branding style. Let’s take a look at some examples that will demonstrate how to make certain custom changes to your default UI.

Change the Display of Widgets by Using Predefined Classes


The Nuxeo Platform provides predefined styles that you can easily reuse. For example, in the “Messages” part of the Nuxeo UI Style Guide you have this list of classes:


Feedback messages style classes Feedback messages style classes

You can use any of these classes to create your own widget display. In this example, we will take the “infoFeedback” and use it when creating a new search filter.

In Nuxeo Studio, you can create your new search filter by using a Content View and adding, for instance, the built-in widget “Container” which also contains the built-in widget “Full Text”. Edit the layout widget for the container and add “infoFeedback” for the Header Style class. Do the same for every search criteria that you want to add. Here’s what you will see:


Adding infoFeedback header style class Adding infoFeedback header style class

After adding infoFeedback header style class After adding infoFeedback header style class

You can also use the predefined class “coloredWidget” which is the default in every Summary View. So, instead of changing the header style class just put coloredWidget in the Style class:


Adding coloredWidget Style class Adding coloredWidget Style class

After adding coloredWidget Style class After adding coloredWidget Style class

Another example is to use this coloredWidget class in a creation layout:


Adding an information message on your creation layout Adding an information message on your creation layout

Change the Color of Information in a Content View Based on Lifecycle State


When displaying a folder containing a list of documents you may be interested in highlighting documents that are in different stages of the lifecycle, such as, “approved” state, “project” state, etc.


Coloring by lifecycle state Coloring by lifecycle state

Here’s how you can manage this change.


  • In the CSS, define one style per lifecycle state (we use the default lifecycle states “project” and “approved”)


.project {
color: blue;
}
.approved {
color: green;
}


  • Then in your Content View, edit the widget you want to color and fill the “Style class” property with:

    #{row.data.currentLifeCycleState}



Fill the style class Fill the style class

And that’s it!

Now I will show you what you can do if you are interested in using or creating your own CSS styles.

Change the CSS of the Default Summary Tab


Let’s take a simple example. You might have noticed that there are blue containers (coloredWidget class) in the default summary view for metadata and content (starting from the Nuxeo Platform 6.0).


Default View Default View

We will try to customize the Summary View by setting the background color to none.


Customized View Customized View

All we have to change in the CSS is this:

.tabsContent .summary .content_block,
.tabsContent .summary .metadata_block {
background: none repeat scroll 0 0 #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: none;}

As you can see, there are a lot of options you can play around with to get the look you want. So, go ahead and have fun creating your own custom designs for the Nuxeo Platform UI!

 


Category: Product & Development
Tagged: How to, Nuxeo UI