• State Verified Answer
  • +1 person also asked this people also asked this
  • Replies 12 replies
  • Answers 1 answer
  • Subscribers 13 subscribers
  • Views 6577 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Combining text with clickable email address using mailto

urszulak0001
Certified Associate Developer

Hi there,

I need to create on Interface, a text with a clickable email address. It should look like: For enquiries, please email emailaddress@company.com 

The email address should be interactive and clickable. After clicking on it, it should automatically open Outlook or other default Inbox and populate emailaddress@company.com in the 'To' field.

This is the code I started working on, but it looks like I'm missing something 

a!richTextItem(
text: concat("For enquiries please email ",
a!safeLink(
label: "emailaddress@company.com",
uri: "mailto://emailaddress@company.com"
)),
size: "MEDIUM"
)

Is it even achievable? Sounds simple, but I'm new to Appian, so I'm wondering if you can concat text and safelink together.

Any suggestions high appreciated.

Cheers,

  Discussion posts and replies are publicly visible

Parents Reply Children
  • 0
    Certified Associate Developer
     in reply to vinayr273

    I get an error message. However I need a link only on emailaddress@company.com and not whole text

  • +1
    Certified Senior Developer
     in reply to urszulak0001

    Not sure why you got the error message, but for me its working fine.

    Please share the error message.

    a!richTextDisplayField(
        value : 
        {
          a!richTextItem(
            text : "For enquiries please email ",
            size: "MEDIUM"
          ),
          a!richTextItem(
            text: "emailaddress@company.com",
            link : 
            a!safeLink(
              label: "emailaddress@company.com",
              uri: "mailto://emailaddress@company.com"
            ), 
            size: "MEDIUM"
          )
        }
      )

  • 0
    Certified Associate Developer
     in reply to vinayr273

    Thanks so much for this.  This is the error message: Interface Definition: Expression evaluation error at function a!richTextDisplayField [line 70]: A rich text display component [label=“”] has an invalid value for “value”. Value can only be of type text, rich text item, rich text image, rich text icon, rich text bulleted list, or rich text numbered list. Received RichTextDisplayField.

  • +1 in reply to urszulak0001

    What error do you see? The code should work, you can even pass email subject and cc recipients if needed from Appian on clicking that link. Below is the code snippet,

    a!richTextDisplayField(
    value: {
    a!richTextItem(
    text: "For enquiries please email "
    ),
    a!richTextItem(
    text: "ask@company.com",
    link: a!safeLink(
    label: "ask@company.com",
    uri: "mailto://ask@company.com?subject=Clarification needed&cc=test@test.com"
    ),
    size: "MEDIUM"
    )
    }
    ) 

  • 0
    Certified Senior Developer
     in reply to urszulak0001

    Please share your complete code, I think you are calling richTextDisplayField inside component 

  • 0
    Certified Associate Developer
     in reply to vinayr273 

    load(
  local!docuList: {
    "Passport",
    "Proof of address",
    "Qualification certificates"
  },
  a!sectionLayout(
    label: "",
    contents: {
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: concat(
              "Your application has been submitted!" & char(
      10
    ),
              char(
                10
              )
            ),
            size: "LARGE"
          ),
          a!richTextItem(
            text: concat(
              "Your Application Reference number is ",
              ri!applicationId,
              char(
                10
              )
            ),
            size: "LARGE"
          ),
          a!richTextItem(
            text: "
Your application will now be reviewed by a member of our registration and advice team and we will process it as quickly as possible. As part of the application process we might need more information about you, so please make sure you check your emails regularly.
You may be asked to provide any of the following documents:
",
            size: "MEDIUM"
          )
        }
      ),
      a!richTextDisplayField(
        value: a!richTextBulletedList(
          items: local!docuList
        )
      ),
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: {
              "If your application is approved, you will get an email notification asking you to login to your account and pay the registration fee."
            },
            size: "MEDIUM"
          )
        }
      ),
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: {
              "Please note, you will not be able to practise as a social worker before your application has been approved and you have paid the registration fee."
            },
            size: "MEDIUM"
          )
        }
      ),
      a!linkField(
        links : {
          a!safeLink(
            label : "Start Survey",
            uri : cons!SURVEY_URL
          )          
        }
      ),      
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: {
              "You can log back in to your account to see the status of your application and read new messages."
            },
            size: "MEDIUM"
          )
        }
      ),
      a!richTextDisplayField(
        label: "Rich Text",
        labelPosition: "ABOVE",
        value: {
          a!richTextDisplayField(
            value : 
            {
              a!richTextItem(
                text : "For enquiries please email ",
                size: "MEDIUM"
              ),
              a!richTextItem(
                text: "emailaddress@company.com",
                link : 
                a!safeLink(
                  label: "emailaddress@company.com",
                  uri: "mailto://emailaddress@company.com"
                ),           
                size: "MEDIUM"
              )
            }
          )
        }
      ),
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: "Return to your account overview",
            link: a!safeLink(
              label : "Return to your account overview",
              uri : cons!PORTAL_URL
            )
          )})
    },
    showWhen: ri!showWhen
  )
)

  • +1
    Certified Senior Developer
     in reply to urszulak0001

    You have call the richtextDisplayField inside the  richtextDisplayField  component.

    load(
  local!docuList: {
    "Passport",
    "Proof of address",
    "Qualification certificates"
  },
  a!sectionLayout(
    label: "",
    contents: {
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: concat(
              "Your application has been submitted!" & char(
                10
              ),
              char(
                10
              )
            ),
            size: "LARGE"
          ),
          a!richTextItem(
            text: concat(
              "Your Application Reference number is ",
              ri!applicationId,
              char(
                10
              )
            ),
            size: "LARGE"
          ),
          a!richTextItem(
            text: "
Your application will now be reviewed by a member of our registration and advice team and we will process it as quickly as possible. As part of the application process we might need more information about you, so please make sure you check your emails regularly.
You may be asked to provide any of the following documents:
",
            size: "MEDIUM"
          )
        }
      ),
      a!richTextDisplayField(
        value: a!richTextBulletedList(
          items: local!docuList
        )
      ),
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: {
              "If your application is approved, you will get an email notification asking you to login to your account and pay the registration fee."
            },
            size: "MEDIUM"
          )
        }
      ),
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: {
              "Please note, you will not be able to practise as a social worker before your application has been approved and you have paid the registration fee."
            },
            size: "MEDIUM"
          )
        }
      ),
      a!linkField(
        links : {
          a!safeLink(
            label : "Start Survey",
            uri : cons!SURVEY_URL
          )          
        }
      ),      
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: {
              "You can log back in to your account to see the status of your application and read new messages."
            },
            size: "MEDIUM"
          )
        }
      ),
      a!richTextDisplayField(
        label: "Rich Text",
        labelPosition: "ABOVE",
        value: {
        
              a!richTextItem(
                text : "For enquiries please email ",
                size: "MEDIUM"
              ),
              a!richTextItem(
                text: "emailaddress@company.com",
                link : 
                a!safeLink(
                  label: "emailaddress@company.com",
                  uri: "mailto://emailaddress@company.com"
                ),           
                size: "MEDIUM"
              )
            
        }
      ),
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: "Return to your account overview",
            link: a!safeLink(
              label : "Return to your account overview",
              uri : cons!PORTAL_URL
            )
          )})
    },
    showWhen: ri!showWhen
  )
)

  • 0
    Certified Associate Developer
     in reply to vinayr273

    Thanks a million. This solved the problem. So what exactly did you change, just so I can learn from the problem? 

  • 0 in reply to urszulak0001
    urszulak0001 said:
    So what exactly did you change, just so I can learn from the problem?

    As  mentioned, you had a richTextDisplayField component nested within the value parameter of another richTextDisplayField.  Basically a complete extra unnecessary level of nesting.

  • 0 in reply to Mike Schmitt

    Hello Please, How do I make the mailto: dynamic. I want the email to provided as shown in the image:

    Thanks

    ==============================code

    ===============================================================================

                      a!sideBySideItem(
                        showwhen: not(local!isEditable),
                        item: a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextItem(
                              text: { "Email" },
                              color: "SECONDARY",
                              size: "SMALL"
                            ),
                            char(10),
                            a!richTextItem(
                              text: fv!item.emailDesc,
                              link :
                              a!safeLink(
                                label: fv!item.emailDesc,
                                uri: "mailto://fv!item.emailDesc"
                              ),
                              style: "STRONG"
                            )
                          }
                        )
                      ),

© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.