Creating clickable read-only URL in Survey123 form

114
2
Jump to solution
05-23-2022 07:05 AM
erica_tefft
Occasional Contributor III

Hi, 

I was reading this blog post on the December 2021 update and was hoping for some clarification on this bug, which was marked as resolved in the post:

  • BUG-000130873 The Survey123 web application does not honor HTML tag formatting set on surveys published from Survey123 Connect.

I have a Survey123 form, which I am designing in the latest version of Connect. The URL I am creating works perfectly in Connect when I test, but as soon as the form is published the web form (which I have embedded in a Dashboard) does not work. Please see details below.

I am having some issues with an a href statement working properly. It works perfectly in the field app and Connect (latest version downloaded today). Here is what I see in my form within a Dashboard; the blacked out portion is a read-only URL to SharePoint, while the hyperlink is in a 'note' and should say "View Project Files" and bring the user to the SharePoint location from above:

erica_tefft_0-1653314414990.png

 

The URL is completely different than what is specified; it goes here instead: https://survey123.arcgis.com/share/v3.14/

I have tried the a href statement with a : and = after 'target' and get the same result. Here is the XLSForm:

erica_tefft_1-1653314414995.png

Is this expected behavior? Any advice would be appreciated.

Erica
0 Kudos
1 Solution

Accepted Solutions
IsmaelChivite
Esri Notable Contributor

Hi Erica. The mobile and web apps sanitize HTML tags differently. This is why you see your links working in one but not the other. The mobile app is much more strict.

There should be no issues with fixed links. For example, this will work in both the web and mobile apps:

IsmaelChivite_0-1653326735609.png

Problems arise when you make your link dynamic. For example, here I am inserting a variable in the link using data from a question in the form. This syntax works in the mobile app, but not in the web app

IsmaelChivite_1-1653326840345.png

The trick is to create the complete HTML tag in a calculate question, and then bring that into your note label. For example:

IsmaelChivite_2-1653327062181.png

Here is the calculation in plain text for clarity. Putting the quotes of the right type in the right place can be tricky. I typically make the calculate question a text question  for debugging, and when it is good to go I turn it into a calculate with esriFieldType set to null.

concat('<a href="https://www.esri.com/',${sublink},'">My link with sublink</a>')

concat('<a href="https://www.esri.com/',${sublink},'" target="_blank">My link with sublink</a>')

 

 

 

View solution in original post

2 Replies
IsmaelChivite
Esri Notable Contributor

Hi Erica. The mobile and web apps sanitize HTML tags differently. This is why you see your links working in one but not the other. The mobile app is much more strict.

There should be no issues with fixed links. For example, this will work in both the web and mobile apps:

IsmaelChivite_0-1653326735609.png

Problems arise when you make your link dynamic. For example, here I am inserting a variable in the link using data from a question in the form. This syntax works in the mobile app, but not in the web app

IsmaelChivite_1-1653326840345.png

The trick is to create the complete HTML tag in a calculate question, and then bring that into your note label. For example:

IsmaelChivite_2-1653327062181.png

Here is the calculation in plain text for clarity. Putting the quotes of the right type in the right place can be tricky. I typically make the calculate question a text question  for debugging, and when it is good to go I turn it into a calculate with esriFieldType set to null.

concat('<a href="https://www.esri.com/',${sublink},'">My link with sublink</a>')

concat('<a href="https://www.esri.com/',${sublink},'" target="_blank">My link with sublink</a>')

 

 

 

erica_tefft
Occasional Contributor III

Thank you for that help - I was not quite doing it this way. I was trying to set up one field for my link (which is type=text, but appearance=calculation and then a concat statement in the calculate column to generate the URL from a base URL and then 3 different fields in the form) and then a note which has the a href in the "label" column. Adding an intermediate calculate question for 'mylink' with your example above worked perfectly. 

My quotes were also a bit different from what you've shown, so seeing the second example was very helpful.  

I appreciate the help!

Erica
0 Kudos