Just recently, I had a conversation with my UX team about the various layout components in Appian, when to use them and how they work together, or not.

Each of these layout components is made for a specific purpose, and I see it as my obligation as a professional Appian developer to understand in detail how to use these components.

For each component, the Appian documentation describes the intended purpose, and they mean what they say. E.g., for the form layout, they write:

Use this as the top-level layout for start and task forms.

OK … but why? What makes the form layout stand out from the other layouts like billboard or header content? I had some ideas in my head, but could not clearly explain these differences to my UX colleagues. So I started my journey of discovery to find out what exactly is going on.

Form Layout

The form layout includes the following components.

Do you spot the two horizontal lines, these are part of that layout and you cannot remove them?

All of this is no rocket science, and I can easily create such a layout without using the form layout component. So there must be something special only this layout component can do.

Purpose

It took me a while, thinking back and forth.

Then I remembered that a task in a process is displayed in various places! This can be a popup dialog, a page in a site, or standalone. Each of these places have their specific requirements, and the component has to make sure, that the top-level layout looks good everywhere.

One place is even more special. When a process start form is opened in a popup, the form layout adds scrolling for just the contents section, while label and instructions, and the buttons stay put.

And a task form is always wrapped into the task management UI that allows the user to accept, to reassign a task, and to save a draft.

Special

Now you might be thinking: “Yes, and … ? I can just replicate that myself! And besides, I don’t like any of this, and I want to build my own layout!”

Sure, there is nothing that would stop you from doing this, except one thing. The whole idea of Appian is to decrease flexibility to make us developers more efficient. When you e.g., try to use a billboard layout for your task form, it will always look a bit awkward as it will not be displayed in full screen. And in a popup dialog, you lose the scrolling feature.

There is one more thing in regard to accessibility and localization. The a!buttonLayout() used in the from layout makes sure that the button order of primary vs. secondary buttons following the left-to-right or right-to-left reading direction of the users language. And it adapts to smaller screen sizes by stacking the buttons in a clever way.

Summary

In our UX team conversations, it took a while to get to a common understanding of what the individual layout components are made for, and what makes them special.

We started to develop our own guidelines on when and how to use each layout component, without fighting against the guidelines that the platform brings with it.

The platform guidelines are not something I want to fight against, but I want to understand them in detail and use them for my own benefit. This might take a while, but I can only recommend that you engage with the unique features of the Appian platform.

What is your experience with the form layout? Let me know in the comments below!

Rock your Appian layout components!