Toggle between two sites via. Card Layout

Hi

I am working on version 19.2.

My requirement is, my user has an access to two different sites. Now I want when he logs in he is diverted to a page wherein he selects either of the cards and when he selects his option he is diverted to the corresponding site. I have tried to achieve this requirement with the help of below code:

load(
  local!options: {
    {icon: "money", name: "Site 1",correspondingValue: "https://www.google.com/"},
    {icon: "university", name: "Site 2", correspondingValue: "https://www.google.com/"}
  },
  local!selectedReport,
  {
    a!richTextDisplayField(
      labelPosition: "COLLAPSED",
      value: {
        a!richTextItem(
          text: "Please select a site",
          color: "ACCENT",
          size: "MEDIUM",
          style:"STRONG"
        ),
        char(10)
      },
      align: "CENTER"
    ),
    a!columnsLayout(
      columns: {
        a!columnLayout(),
        a!forEach(
          items: local!options,
          expression: a!columnLayout(
            contents: {
              a!cardLayout(
                style:if(
                  rule!APN_isBlank(local!selectedReport),
                  "STANDARD",
                  if(
                    local!selectedReport = fv!item.correspondingValue,
                    "INFO",
                    "STANDARD"
                  )
                ),
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextIcon(
                        icon: fv!item.icon,
                        color: "ACCENT",
                        size: "LARGE"
                      ),
                      char(10),
                      char(10),
                      a!richTextItem(
                        text: fv!item.name,
                        color: "#104E8B",
                        size: "MEDIUM",
                        style: "STRONG"
                      ),
                      char(10)
                    },
                    align: "CENTER"
                  )
                },
                link: a!safeLink(
                        label: "",
                        uri:fv!item.correspondingValue
                      ),
                height: "SHORT"
              )
            },
            width: "MEDIUM"
          )
        ),
        a!columnLayout()
      },
      marginBelow: "STANDARD"
    )
  }
)

However, since I am using a!safeLink() to divert to the corresponding site, that site opens in a new tab and this page remains as it is. I want that as soon as the site selected opens this page vanishes off. In other words, it should be a seamless experience for the user and everything should happen for him in the same tab.

Any suggestions for the same?

Thanks in advance!!

  Discussion posts and replies are publicly visible

  • Hi komal,

    You can try this 

    {
    load(
    local!selectedCard,
    local!options: {
    {icon: "home", name: "Google", desc: "">https://www.google.com/"},
    {icon: "building", name: "Youtube", desc: "">https://www.youtube.com/"}
    },
    {

    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {
    char(10),
    char(10),
    a!richTextItem(
    text: "which site you want to go?",
    color: "ACCENT",
    size: "LARGE"
    ),
    char(10),
    char(10)
    },
    showWhen: isNull(local!selectedCard),
    align: "CENTER"
    ),
    a!columnsLayout(
    columns: {
    a!columnLayout(),
    a!forEach(
    items: local!options,
    expression: a!columnLayout(
    contents: {
    a!cardLayout(
    contents: {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: {
    char(10),
    char(10),
    a!richTextIcon(
    icon: fv!item.icon,
    color: "#8CA1D0",
    size: "LARGE"
    ),
    char(10),
    char(10),
    a!richTextItem(
    text: fv!item.name,
    color: "ACCENT",
    size: "LARGE",
    style: "STRONG"
    ),
    char(10),
    char(10),
    a!richTextItem(
    text: fv!item.desc,
    size: "SMALL"
    )
    },
    align: "CENTER"
    )
    },
    link: a!dynamicLink(
    saveInto: a!save(local!selectedCard, fv!item.desc)
    ),


    height: "MEDIUM"
    )
    },
    width: "MEDIUM"
    )
    ),
    a!columnLayout()
    },
    showWhen: isNull(local!selectedCard),
    marginBelow: "STANDARD"
    ),
    a!webContentField(
    source: local!selectedCard,
    height: "MEDIUM",
    showBorder: true,
    altText: "Appian Corporation"
    )
    }
    )
    }

  • a!webContentField(
    source: local!selectedCard,
    height: "MEDIUM",
    showBorder: true,
    altText: "Appian Corporation"
    ) ,

    it might be your solution.

  • 0
    Certified Senior Developer

    It's because you must be clicking on the link from the interface in design mode. Is this still behaviour when you click on the link directly from the site?

  • 0
    Certified Lead Developer
    in reply to aayusha
    Is this still behaviour when you click on the link directly from the site?

    When using a!safeLink(), the clicked link will always open in a new window/tab.