Integrating S123 and FieldMaps with an URL link with "&" symbol

[KenBouchard]

Hi,

I'm prepopulating fields in a S123 survey from the pop-up in FieldMaps.

Everything works great until I get some company name that have a "&" symbol in their name. (eg. Jack & Jill Farms)

The value stops at the "&" sign.  On the example above, it become only Jack.

Any advice?

Ken

[TylerGraham2 · Accepted solution]

Are you passing the url through UrlEncode?

https://developers.arcgis.com/arcade/function-reference/text_functions/#urlencode

[KenBouchard]

I'm passing it through an hyperlink in a text in the pop-up.  Not sure if/how I can use UrlEncode.

This is the link URL I've created for it:

https://survey123.arcgis.app?itemID=36ff9e8c13e042a58cfce4ad87f55d19&field:Field_ID={field_id}&field...

I've never used UrlEncode, not sure how to use it.  I tried putting the whole thing, shown on the help page, in the Link URL, didn't worked... (I don't think it can handle variable...)

Thanks for your help.

Ken

[TylerGraham2]

UrlEncode is supposed to take whatever you pass through it encode the non-ASCII characters.  Passing it through the encoder should fix your Jack & Jill issue since it should take the & and replace it with the encoded value of %26. You'll need to create an arcade expression in your pop up to use it.  I parsed out the relevant parts from a larger script of mine. You'll want to replace my unique variables with yours for passing attribute values between field maps and the survey. I like to set all of those variables near the start so they are all in one place and it is easier to track down problems.  

For example your field id should be something like:

var field_val = $feature.field_id;

Var establishes that you are creating a variable with the name field_val.  To call the attribute value from a field in the feature layer use $feature.<field_name>.  In this case we are saying the variable equals whatever attribute value is in the feature's field_id field.  

In the params variable you put all the parameters you need to attach to the suvey123 url. This includes passing field values, survey action, callbacks, etc.  So to pass your field_id value to the survey"s Field_ID field you need to add a line in there that is:

"field:Field_ID": field_val,

If you look at the url you put together manually this is the part that we are creating: field:Field_ID={field_id}. UrlEncode will try to turn the colons in the line not in quotations into an equal sign, so it is important to make sure the field:Field_ID is in quotes otherwise it will be spit out at field=Field_ID which won't work.  

For the next field value to pass create a new variable for the $feature at the top of the script, then start a new line in params and repeat the "field:<field_name>": <variable>, format.

var item_id = <your survey123 id goes here>;
var map_id = <web map id goes here>;
var proj_val = $feature.project;
var globalid = $feature.GlobalID;

var urlsource = 'arcgis-survey123://?';
var fmurl = 'https://fieldmaps.arcgis.app?';
var recmess = Text("Enter Notes");
//Link display text
var fmfullurl = fmurl+ 'referenceContext=open' + '&itemID=' + map_id;
// full url to reopen field maps

  var params = {
    //parameters for UrlEncode() to use
    itemID: item_id,
    //use form item id here to target specified survey
    action: 'collect',
    //action tells survey123 to start a new record
    "field:point_guid": globalid,
    //pass global id from feature to survey guid field 
    //cannot assign variable for guid field name here, so this      one must be entered here.
    "field:project": proj_val,
    //pass project from feature to survey project field
    update: 'true',
    callback: fmfullurl
    //callback reopens Field Maps after the survey is completed
  };
 
var fullURL = Concatenate([urlsource,UrlEncode(params)]);
//encode url parameters and concatenate with the survey123 url

var not_zelda = `<div style="text-align:center;">
    <a href="${fullURL}" target="_blank">${recmess}</a>
    </div>`
    //Set the html to creat a link and position it.     
    //The enclosing apostrophes used must be the ` located     
//under ~.

return {
  type: 'text',
  text: not_zelda,
  //this property supports html tags
  //This bit will take everything above and display a link   //in the pop up window
};

[KenBouchard · Accepted solution]

Got it to work! 😁

The URL encoder is the solution.

Thanks a LOT for your help! 

(Here is a little how-to for anyone coming to this thread in the future)

Create an attribute expression:

Put the code in with the encoder:

and finally hyperlink it to the attribute expression

Ken

[ElliottPlack__SHA_]

Solid! Thanks for this inspiration @KenBouchard !! The solution is to first write an attribute expression, then call that in text box with a link the Survey123. I can confirm it also works with Survey123 field app URLs (FYI @Ismael ).

I was unable to get this working in Field Maps on iOS when I had the entire URL and button generation in one Arcade expression, returning text (although this works fine on the web).

Using your workaround, I wrote the following attribute expression for our Park & Ride usage survey:

// Define the Survey123 item ID
var surveyItemID = "55555555555555555555555555555555";

// Create the parameters dictionary
var params = {
  itemID: surveyItemID,
  "field:pnrSurveyed": $feature.COMMON_NAME,
  "field:bikeRackCount": DefaultValue($feature.BIKE_RACK_COUNT, 0),
  "field:bikeStorageCount": DefaultValue($feature.BIKE_STORAGE_COUNT, 0),
  "field:truckSpaceCount": DefaultValue($feature.TRUCK_SPACE_COUNT, 0),
  "field:motorcycleSpaceCount": DefaultValue($feature.MOTORCYCLE_SPACE_COUNT, 0),
  "field:kissRideCount": DefaultValue($feature.KISSNRIDE_GEN_SPACE_COUNT, 0),
  "field:INCOMING_GLOBALID": $feature.GLOBALID,
  "field:lotType": $feature.PNR_TYPE
};

// Concatenate the base URL with the encoded parameters
var surveyURL = "arcgis-survey123://?" + UrlEncode(params);
return surveyURL;

Then, take note of the expression number of the url. In a new text box in the popup I added the following HTML (feel free to reuse):

<div style="padding: 10px;">
    <a href="{expression/expr999}" target="_blank" 
    style="display: inline-block; padding: 0.5em 1em; font-family: Avenir Next, sans-serif; font-size: 1em; color: white; background-color: #28a745; text-decoration: none; border-radius: 0.25em;">
        Collect Survey in Survey123 Field App
    </a>
</div>