I see many developers joining the Appian universe asking for popups. This seems to be a big thing in other environments, but Appian has none, except for Record actions. While this works extremely well within the paradigm of process-driven applications, which Appian is designed for, there are some scenarios in which I might want to free my UX design decisions from the shackles of the platform.

A word of caution at this point. Trying to fight Appian’s inner paradigms goes against the ease and speed of development that the platform offers. In my experience, you benefit most when you change your mindset and adapt the way you design applications to the specifics of the platform.

The Idea

So, what is the purpose of a popup? As a UX expert, I would describe the purpose of a popup window as a way to present important information or functionality to the user without interrupting their current task or workflow. Popups are commonly used to provide additional context or options related to the current page or task, such as a login prompt, a subscription offer, or a confirmation dialog.

Now, how do we implement this purpose without the option to overlay the UI? Simple thing! Just hide everything and show a reduced UI instead. Allow me to explain.

You create some input dialog and for a certain situation, and want the user to confirm something.

The user clicks the buttons, and ….

… the UI vanishes and only that popup is visible. Clicking a button on the popup returns back to the input fields.

And all it takes is some UI state management.

Example

Not much to write about this example. Enjoy some nice SAIL code 🙂

a!localVariables(
  local!showPopup: false,
  {
    a!sectionLayout(
      showWhen: not(local!showPopup),
      contents: {
        a!textField(
          label: "Text",
        ),
        a!paragraphField(
          label: "Paragraph",
        ),
        a!buttonArrayLayout(
          buttons: {
            a!buttonWidget(
              label: "Show Popup!",
              icon: "arrow-right",
              value: true,
              saveInto: local!showPopup,
              style: "PRIMARY"
            )
          },
          align: "CENTER"
        )
      },
    ),
    a!columnsLayout(
      showWhen: local!showPopup,
      columns: {
        a!columnLayout(),
        a!columnLayout(
          contents: {
            a!cardLayout(
              marginAbove: "EVEN_MORE",
              showBorder: false,
              showShadow: true,
              contents: {
                a!sectionLayout(
                  contents: {
                    a!richTextDisplayField(
                      labelPosition: "COLLAPSED",
                      value: {
                        a!richTextItem(
                          text: {
                            "This is a fake popup window!"
                          },
                          size: "MEDIUM_PLUS"
                        ),
                        char(10),
                        char(10),
                        "And shows some text to the user."
                      }
                    )
                  },
                  divider: "BELOW"
                ),
                a!buttonLayout(
                  primaryButtons: {
                    a!buttonWidget(
                      label: "OK",
                      icon: "check",
                      style: "PRIMARY",
                      value: false,
                      saveInto: local!showPopup
                    )
                  },
                  secondaryButtons: {
                    a!buttonWidget(
                      label: "Cancel",
                      icon: "times",
                      style: "NORMAL",
                      value: false,
                      saveInto: local!showPopup
                    )
                  }
                )
              },
            )
          }
        ),
        a!columnLayout()
      },
    )
  }
)

Summary

Popups in Appian are really simple to implement. Take the example from above and create exceptional experiences for your users. You will be infinitely grateful for this.

Write in the comments below how you use this pattern.