Hi, is there an option for a modal pop-up in Appian? Like when a pop-up will appear and the entire screen will be greyed out except the pop-up and until you select any option in the pop up the screen will remain greyed out. Can anyone let me know if possible then how can it be done?
Discussion posts and replies are publicly visible
Hi Shalini, in your scenario you need to create an interface or functionality that works like pop-ups but they are not true pop-ups.You need to basically trigger the visibility of the objects using "showWhen" parameter. You can take the reference from the below-mentioned code :
a!localVariables( local!name, local!showPopup: false, { a!sectionLayout( contents: { a!textField( label: "Enter Name", value: local!name, saveInto: local!name ), a!buttonArrayLayout( buttons: { a!buttonWidget( label: "Submit", icon: "arrow-right", value: true, saveInto: local!showPopup, style: "PRIMARY" ) }, align: "CENTER" ) }, showWhen: not(local!showPopup) ), a!columnsLayout( columns: { a!columnLayout(), a!columnLayout( contents: { a!cardLayout( contents: { a!sectionLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { "Are you sure?" }, size: "MEDIUM_PLUS" ), } ) }, divider: "BELOW" ), a!buttonLayout( primaryButtons: { a!buttonWidget( label: "OK", icon: "check", value: false, saveInto: local!showPopup, style: "PRIMARY" ) }, secondaryButtons: { a!buttonWidget( label: "Cancel", icon: "times", value: false, saveInto: local!showPopup, style: "NORMAL" ) } ) }, marginAbove: "EVEN_MORE", showBorder: false, showShadow: true ) } ), a!columnLayout() }, showWhen: local!showPopup ) } )
Slight adjustments to meet the requirements:
a!localVariables( local!name, local!showPopup: false, { a!sectionLayout( contents: { a!textField( label: "Enter Name", value: local!name, saveInto: local!name ), a!buttonArrayLayout( buttons: { a!buttonWidget( label: "Submit", icon: "arrow-right", value: true, saveInto: local!showPopup, style: "PRIMARY" ) }, align: "CENTER" ) }, showWhen: not(local!showPopup) ), a!cardLayout( contents: a!columnsLayout( columns: { a!columnLayout(), a!columnLayout( contents: { a!cardLayout( contents: { a!sectionLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( text: { "Are you sure?" }, size: "MEDIUM_PLUS" ), } ) }, divider: "BELOW" ), a!buttonLayout( primaryButtons: { a!buttonWidget( label: "OK", icon: "check", value: false, saveInto: local!showPopup, style: "PRIMARY" ) }, secondaryButtons: { a!buttonWidget( label: "Cancel", icon: "times", value: false, saveInto: local!showPopup, style: "NORMAL" ) } ) }, marginAbove: "EVEN_MORE", showBorder: false, showShadow: true, marginBelow: "EVEN_MORE" ) } ), a!columnLayout() }, ), style: "STANDARD", showWhen: local!showPopup ) } )