Skip to main content
osamag0002
osamag0002
May 9, 2022
Solved

How to put link inside button

  • May 9, 2022
  • 7 replies
  • 1 view

I want to make a button that take me to safe link ,

i can make link separately from a alink component but i want to make it by a button

any ideas ?

    Best answer by rolands0008

    Hi osamag,

    Here you can find 2 diffrerent solutions for what you are asking for. 

    The first one is a Submit Link through a rich text display field and the second one is a Submit Link inside a card layout.

    a!formLayout(
  label: "Form ",
  contents: {
    a!sectionLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(
                    text: "Submit Link ",
                    size: "MEDIUM",
                    color: "ACCENT",
                    style: "STRONG",
                    link: a!submitLink(
                      confirmHeader: "Confirm Message",
                      confirmMessage: "Submit",
                      confirmButtonStyle: "PRIMARY"
                    ),
                    linkStyle: "STANDALONE"
                  )
                ),
                a!cardLayout(
                  contents: {
                    a!richTextDisplayField(
                      align: "CENTER",
                      marginAbove: "NONE",
                      marginBelow: "LESS",
                      value: a!richTextItem(
                        text: "Submit",
                        size: "STANDARD",
                        color: "ACCENT",
                        style: "STRONG"
                      )
                    )
                  },
                  link: a!submitLink(
                    confirmHeader: "Confirm Message",
                    confirmMessage: "Submit?",
                    confirmButtonStyle: "PRIMARY"
                  ),
                  height: "AUTO",
                  style: "NONE",
                  showBorder: true,
                  padding: "EVEN_LESS",
                  shape: "SQUARED",
                )
              }
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            )
          }
        )
      }
    )
  },
  buttons: a!buttonLayout(
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: ri!cancel,
        submit: true,
        style: "NORMAL",
        validate: false
      )
    }
  )
)

    7 replies

    gopalk2865
    gopalk2865
    Participating Frequently
    May 9, 2022

    Hi,You can not configure link inside  a button But you can use card as a button and then you can configure your link.

      osamag0002
      osamag0002Author
      May 9, 2022

      in which component inside the button should i place a!linkfield ?

      richardm900458
      richardm900458
      May 9, 2022

      i think gopalik were just a bit fast.
      You canNOT use a linkfield in a buttonarraylayout or buttonlayout (or buttonwidget).
      -> you can create cardLayouts in a kind of buttonStyle and use them.

      but a question: what do you try to archieve?

      stefanhelzle0001
      stefanhelzle0001
      Brainy
      May 9, 2022

      Following the Appian UX Design guide, buttons are for action and links for navigation. What do you want to achieve?

        osamag0002
        osamag0002Author
        May 10, 2022

        i eant to click a button that open a url 

        but as Gopalk adviced me card layout do the same function

        R
        rolands0008Answer
        May 9, 2022

        Hi osamag,

        Here you can find 2 diffrerent solutions for what you are asking for. 

        The first one is a Submit Link through a rich text display field and the second one is a Submit Link inside a card layout.

        a!formLayout(
  label: "Form ",
  contents: {
    a!sectionLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  value: a!richTextItem(
                    text: "Submit Link ",
                    size: "MEDIUM",
                    color: "ACCENT",
                    style: "STRONG",
                    link: a!submitLink(
                      confirmHeader: "Confirm Message",
                      confirmMessage: "Submit",
                      confirmButtonStyle: "PRIMARY"
                    ),
                    linkStyle: "STANDALONE"
                  )
                ),
                a!cardLayout(
                  contents: {
                    a!richTextDisplayField(
                      align: "CENTER",
                      marginAbove: "NONE",
                      marginBelow: "LESS",
                      value: a!richTextItem(
                        text: "Submit",
                        size: "STANDARD",
                        color: "ACCENT",
                        style: "STRONG"
                      )
                    )
                  },
                  link: a!submitLink(
                    confirmHeader: "Confirm Message",
                    confirmMessage: "Submit?",
                    confirmButtonStyle: "PRIMARY"
                  ),
                  height: "AUTO",
                  style: "NONE",
                  showBorder: true,
                  padding: "EVEN_LESS",
                  shape: "SQUARED",
                )
              }
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            ),
            a!columnLayout(
              contents: {}
            )
          }
        )
      }
    )
  },
  buttons: a!buttonLayout(
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: ri!cancel,
        submit: true,
        style: "NORMAL",
        validate: false
      )
    }
  )
)

          Terms & ConditionsAccessibility statement