Appian split Button

Question

Hi everyone, 
 I am looking to implement a Split Button functionality in my interface (a main action button with an attached dropdown for secondary actions). I am aware that this is not a native component in Appian's current UI toolkit. 
 Has anyone successfully implemented a similar pattern using a combination of a!buttonLayout() and a!dropdown() or perhaps a custom SAIL configuration? 
 I&rsquo;ve considered using a small icon button next to the main button to trigger a menu, but I&rsquo;m concerned about the alignment and the mobile responsiveness. If you have any examples or best practices on how to achieve this "split" look while maintaining a clean UX, I would greatly appreciate your insights. 
 Thanks in advance!

Shubham Aware · Accepted Answer

You could try this. a!localVariables(
 local!showMenu: false,
 {
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: 
 a!cardLayout(
 contents: 
 {
 a!buttonArrayLayout(
 buttons: {
 a!buttonWidget(
 label: "Main Option | ",
 saveInto: a!save(local!showMenu, not(local!showMenu)),
 icon: if(
 local!showMenu,
 "angle-double-up-bold",
 "angle-double-down-bold"
 ),
 iconPosition: "END",
 style: "LINK"
 
 )
 
 },
 marginBelow: "NONE",
 align: "START"
 ),
 a!horizontalLine(
 marginBelow: "NONE"
 ),
 a!sectionLayout(
 contents: {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 value: a!richTextItem(
 text: "Option 1",
 link: a!dynamicLink(saveInto: {})
 )
 ),
 a!richTextDisplayField(
 value: a!richTextItem(
 text: "Option 2",
 link: a!dynamicLink(saveInto: {})
 )
 ),
 a!richTextDisplayField(
 value: a!richTextItem(
 text: "Option 3",
 link: a!dynamicLink(saveInto: {})
 )
 ),
 a!richTextDisplayField(
 value: a!richTextItem(
 text: "Option 4",
 link: a!dynamicLink(saveInto: {})
 )
 )
 },
 showBorder: false()
 )
 },
 showWhen: local!showMenu,
 marginAbove: "NONE"
 )
 }
 ),
 width: "NARROW"
 
 )
 }
 )
 }
)

Stefan Helzle · Answer

Combining UI components using a sidebyside layout is super simple. While you cannot build that exact component, you should be able to solve that problem in a slightly different way.

Appian split Button

Top Replies