Appian display interface

Question

Hi Community, 
 I&rsquo;m working on a UI inspired by the attached mockup. I&rsquo;m aware that Appian doesn&rsquo;t natively support a fixed/sticky footer within an Overlay, nor a perfect 2x2 grid inside a standard buttonLayout . 
 However, I&rsquo;m determined to get as close to this look as possible. Has anyone tried:

Using a columnsLayout with Cards as buttons to simulate the 2x2 grid?

Using a Header Content Layout inside the overlay to force the bottom bar to stay visible?

I'd love to hear any 'outside the box' ideas to bypass the standard layout constraints and achieve this specific action-bar aesthetic.

Shubham Aware · Answer

If you want something similar to this, you can try it and let us know if you are looking for something similar. a!localVariables(
 local!selectedAction: null,

 a!formLayout(
 titleBar: "Test 1",
 contents: {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: "Value 1",
 color: "#842029",
 style: "STRONG"
 ),
 " ",
 a!richTextItem(
 text: "Value 2",
 color: "#7F6000",
 style: "STRONG"
 )
 }
 ),

 a!sectionLayout(
 label: "SECTION 1",
 contents: {
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 1",
 value: "Value 1",
 readOnly: true
 ),
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 2",
 value: "Value 2",
 readOnly: true
 ),
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 3",
 value: "Value 3",
 readOnly: true
 ),
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 4",
 value: "Value 4",
 readOnly: true
 )
 }
 ),

 a!sectionLayout(
 label: "SECTION 2",
 contents: {
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 5",
 value: "Value 5",
 readOnly: true
 ),
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 6",
 value: "Value 6",
 readOnly: true
 ),
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 7",
 value: "Value 7",
 readOnly: true
 ),
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 8",
 value: "Value 8",
 readOnly: true
 )
 }
 ),

 a!sectionLayout(
 label: "SECTION 3",
 contents: {
 a!textField(
 labelPosition: "JUSTIFIED",
 label: "Label 9",
 value: "Value 9",
 readOnly: true
 )
 }
 ),

 a!sectionLayout(
 label: "SECTION 4",
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: "• Value 10",
 color: "SECONDARY"
 ),
 char(10),
 a!richTextItem(
 text: "• Value 11",
 color: "SECONDARY"
 )
 }
 )
 }
 ),

 a!richTextDisplayField(
 label: "Label 10",
 value: if(
 isnull(local!selectedAction),
 a!richTextItem(
 text: "Value 12",
 color: "SECONDARY"
 ),
 a!richTextItem(
 text: "Selected: " & local!selectedAction,
 style: "STRONG"
 )
 )
 ),

 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: "Value 13",
 style: "STRONG"
 ),
 align: "CENTER"
 )
 },
 link: a!dynamicLink(
 value: "Value 13",
 saveInto: local!selectedAction
 ),
 style: "NONE",
 showBorder: true,
 shape: "SEMI_ROUNDED",
 padding: "STANDARD",
 marginBelow: "STANDARD"
 ),

 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: "Value 14",
 style: "STRONG"
 ),
 align: "CENTER"
 )
 },
 link: a!dynamicLink(
 value: "Value 14",
 saveInto: local!selectedAction
 ),
 style: "NONE",
 showBorder: true,
 shape: "SEMI_ROUNDED",
 padding: "STANDARD"
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: "Value 15",
 style: "STRONG"
 ),
 align: "CENTER"
 )
 },
 link: a!dynamicLink(
 value: "Value 15",
 saveInto: local!selectedAction
 ),
 style: "NONE",
 showBorder: true,
 shape: "SEMI_ROUNDED",
 padding: "STANDARD",
 marginBelow: "STANDARD"
 ),

 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: a!richTextItem(
 text: "Value 16",
 style: "STRONG"
 ),
 align: "CENTER"
 )
 },
 link: a!dynamicLink(
 value: "Value 16",
 saveInto: local!selectedAction
 ),
 style: "NONE",
 showBorder: true,
 shape: "SEMI_ROUNDED",
 padding: "STANDARD"
 )
 }
 )
 },
 spacing: "STANDARD"
 )
 },
 showBorder: false,
 padding: "STANDARD"
 )
 },
 buttons: a!buttonLayout(
 primaryButtons: {
 a!buttonWidget(
 label: "Value 17",
 submit: true,
 style: "SOLID"
 )
 }
 )
 )
)