Modular SDK - Page Template Examples

Designed a modular system for our client-facing software development kit. It allows the user to select from multiple page layouts or create their own. Once the user is satisfied with the layout, they can create cards of varying types and assign a datasource, columns and controls.

This system allows the user to quickly construct business software that supports complex data structures while providing guide rails with user-friendly interfaces so that they can concentrate their efforts on the data structure and IA to satisfy their business needs.

Standard Detail Page

This page allows the user to showcase a record and display direct and indirect metadata. The structure is very flexible and here you see this example has page level evens, row level events, navigation to crawl the data model and tabs to show differing layers of data. This is very powerful as it allows related data to be grouped together and allow the user to quickly gather information, revise a state and take action.

Standard Detail Page

This page allows the user to showcase a record and display direct and indirect metadata. The structure is very flexible and here you see this example has page level evens, row level events, navigation to crawl the data model and tabs to show differing layers of data. This is very powerful as it allows related data to be grouped together and allow the user to quickly gather information, revise a state and take aciton.

Detail Page with Record Selector

This is a popular layout. It gives the same focus as the standard detail page but allows to user to select from a list of records and see its details without having additional navigational clicks. The user can show the records as cards shown here, or as a grid, depending on their data needs. A use case could be customers, products, etc.

Full Page Grid

In the data industry it is very common that the end-users need a full page grid to review large sets of data. Since the use cases vary, the system supports a range of options to update and create data. Here you can see a side panel to insert a singular record. Other options include [Save and Add Another], [Edit] and [Save and Edit Another]. The form itself is completely customizable including columns, controls order, sections, control states, etc. Direct update and bulk update is also available and is up to the page designer.

Full Page Form

In some scenarios the designer may decide that it is best to have a full page form for record create or edit. This is often the case with records that have more data points or more complex data entry needs such as embedded grids and key-value pairs. The record list on the left is optional. The designer could decide this is a focused action on a singular record, or they can choose to include a record list so that they can complete consecutive inserts or updates without needing additional navigation. This also helps the user to have visibility into where they are on their list of records.

More by Lizz Rodriguez

View profile