Question

Modal Pop-Up

Forum|Forum|3 years ago
June 12, 2023
8 replies
3 views

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?

S

sanchitg0002

True Pop-ups are only possible using record actions in Appian with Open Actions In set to "Dialog Box", but the entire screen will not be greyed out instead it will appear on top of it. You can also consider confirmation message popup in buttonWidget.

stefanhelzle0001

Brainy

Check out this conversation: https://community.appian.com/discussions/f/general/28897/need-some-help-on-pop-up

tushark6475

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
    )
  }
)

S

sanchitg0002

Slight adjustments to meet the requirements:

Change the card style to "STANDARD".
Give marginBelow to bring it on the center.

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
    )
  }
)

mikes0011

Brainy

This seemingly gets asked here at least once a week (or at least, almost that much)...

Here's just a first-glance list of ones that come up first if i search the word "modal" here:

One of the above is even your post from just over a year ago - i'm not sure why you'd ask the exact same thing again and expect a different answer?

The Expression Guru

harshitb6843

You're telling me she did not learn pop-up in 1 year? [emoticon:d6dd260102fd406884fc96b8bc59760b]

J

joyd9887

[deleted]

harshitb6843

Well well. ChatGPT isn't at good at responses as you think it is. Try better next time, spammer!

Sign up

Login with SSO

Login to the community

Login with SSO