Customizing Forms and Pages

Civic Platform's Oxygen UI displays forms as pages instead of the old "portlet" model. Now that forms are displayed as pages, they no longer have the constraints of the previous model. Pages provide more space to display data.

To take advantage of the additional real estate on the page, you can customize the forms that users interact with on a regular basis. Redesigning a form can reduce or even eliminate the need for scrolling adding to the form's usability and enhancing the user experience.

Note: Additional information about getting the best use out of the Oxygen UI is available in the Civic Platform User Guide > Civic Platform Access and Usage > Exploring the User Interface.

The following example shows a typical form that can be re-designed to use all of the white space available on the right side of the page:



Similarly, the Oxygen UI displays list views as pages, instead of portlets. Now that lists are no longer constrained within portlets, there is more vertical real estate available to display list items. The following example shows a list view in the Oxygen UI with additional white space at the bottom of the page:



You can use the empty space at the bottom of the page by increasing the default number of rows that will display for the list. To adjust the list view settings:

  1. From a list, click Menu > Edit View:



  2. In the list view editor, set the Contract field to the number of rows you want to display by default; set the Expand field to the number of rows you want to display when a user chooses Menu > Expand List.



    The page now displays more rows and less white space:



Other adjustments and important considerations:

You can also adjust the DEFAULT_LIST_ROWS standard choice to increase the number of rows that are returned from a Global Search. For the best user experience, we recommend 10 rows.

Here are some considerations related to form design:

  • Not all forms need to be re-designed. Consider a phased approach to form re-design.
  • The Oxygen UI and the V360 UI share the same form designer for most forms. If your agency is planning to use the Switch New UI, a form that is redesigned in the Oxygen UI may no longer be optimized for V360 usage.
  • Users will likely have gotten comfortable with the old V360 page layouts and form designs; a training exercise to educate users on the benefits of the new form layouts will help during the transition phase.