Introduction to Structure
When you created your first module, you probably added components as you considered them. While that's a great way to learn what the components do, it's not the best way to build complex applications.
As you work with more components and more complexity, you must stay organized. For one, modules should read easily from left to right and top to bottom. This includes organizing input and output components above and below your logic components. You can also use Display & Layout components to group your components by relationship.
What You'll Learn
In this article, you'll learn:
- How to organize components using display and layout components.
- How structure lets you add logic to multiple components at once.
- How structure improves creator experience.
- How structure improves end-user experience.
Luckily, Unqork has grouping and layout components that'll add structure to your modules. These include the Columns, Panel, Table, Navigation, and Field Group components. All these components help you nest components. You'll find these components in the Display & Layout component group of the Module Builder.
The image below shows how Panels and Columns organize components into easy-to-read groups.
Many of the Unqork snippets also have Panels and other organizational configurations. These configurations will help guide you when using a snippet. For instance, here's how the API Specification snippet looks in the Module Builder:
Unless your module only has a few components, always include structural components. Using these components improve not only your experience but also your end-user's experience.
One benefit of structural components is that they let you apply logic to a group of settings. One example is setting a Panel component to hidden. This hides all the components in the Panel. You can then configure the whole Panel to show when the end-user performs a certain action.
There are also best practices when configuring logic and Plug-In components. Logic components include the Calculator, Decisions, and Data Workflow components. Each component requires inputs, outputs, and the specific logic you'll need for your module. Some best practices are:
Placing input components above their logic component in the Module Builder. This could be an Initializer that triggers a Plug-In component.
Placing output components below their logic component in the Module Builder. This could be a Hidden component that holds a Data Workflow output.
Group all components involved with a Data Workflow around that Data Workflow component.
Here's a great example of the organization of logic components for a complex filtering module:
Adding structure to your modules improves your creator experience by:
Making it easier for others to read and understand your module.
Making it easier to find specific components in your module.
Improving the ability to troubleshoot and make changes to your module.
The image below shows a variety of components for a vehicle registration application. Take note of the column organization and grouping of components that share function.
Formalizing structure improves your end-user's experience by:
Giving your end-user guidance on completing the application process.
Organizing content in a readable way.
Improving your end-user's efficiency in filling out fields.
Let's look at the previous vehicle registration module in Express View. The previous image shows how well organized the module is on the back-end. But, it should be just as organized on the front-end. In the image below, end-users immediately know it's a filtering dashboard. They can also easily follow the fields, drop-downs, and functions of the buttons.