Combining text with clickable email address using mailto

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

    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
    Certified Lead Developer
    in reply to urszulak0001
    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.