URLs in List Data Expression

erica_poisson

Hi - 

I am customizing a list within my Dashboard and running into some odd behavior I am hoping for some help with. 

My feature layer has a field "Project_Folder_URL" which leads off to a SharePoint site. I want this URL to appear, for records which have it, in my customized list as a link that says "View Project Files". This is where I run into issues. I have this variable in my data expression for the list:

var link = Iif(IsEmpty($datapoint["Project_Folder_URL"]), '', 'View Project Files');
return {
  textColor: '',
  backgroundColor: Iif($datapoint["Condition_ContMonitor"] =="Yes", '#3a0000', ''),
  separatorColor:'#',
  selectionColor: '#cccccc',
  selectionTextColor: '',
  attributes: {
    cardHeight: 'auto', // Set consistent height or use 'auto'
    cardBkgColor: '#ffff', // Choose a color such as rgba(150, 130, 110, 0.1),
    radius: '5px',
    value: $datapoint.DCR_File_Number,
    valueSizePx: 18,
    AppStatusIcon: AppStatusIcon,
    AppStatusTxt: $datapoint.Application_Status,
    title: Proper($datapoint.Lot_Address) + Proper($datapoint.ROW_Name) + ', ' + Proper($datapoint.Lot_Town) + Proper($datapoint.ROW_Town),
    titleFontSize: '14px',
    description: 'Request Type: ' + DomainName($datapoint,"Request_Type"),
    maxDescriptionLines: 1, // ( <integer> | none )
    project_url: link,
    footerColor: '#EFECE2',
    footerText: flexItems

I return it in line 20. 

Within my HTML, you can see this expression called here:

<div style="-webkit-box-orient:vertical; -webkit-line-clamp:{expression/maxDescriptionLines1}; display:-webkit-box; font-size:12px; font-weight:200; margin-bottom:0.3rem; opacity:0.6; overflow:hidden; padding:0.3rem 0; text-overflow:ellipsis"><a href="{expression/project_url}">{expression/project_url}</a></div>

The list item looks great, however the URL being created in the list element is incorrect - it actually just changes the URL to that of the Dashboard for each item in the list.

If I change my data expression (line 1 only - the return statement in line 20 remains the same)  to the following, then the link is correct and works. 

var link = $datapoint["Project_Folder_URL"];

The issue here is that this is what my list element looks like:

 

Help understanding why the Iif & IsEmpty statements return the Dashboard URL instead of my project URL would be appreciated. 

Thank you,

 

jcarlson

If I'm understanding this right, your link object is using {expression/project_url} for the link URL and the link's text.

That attribute is coming from the var link. And that variable is defined as:

var link = Iif(IsEmpty($datapoint["Project_Folder_URL"]), '', 'View Project Files');

 

In other words, link will only ever hold two values:

1. '' (an empty string)
2. "View Project Files"

When you attempt to build a URL, and the URL is invalid, AGOL apps will often just convert the URL to a link to the current page.

I would suggest, as an alternative approach, using an attribute to change the display tag in your inline CSS. Set your <a> object to link directly to the Project_Folder_URL attribute, have the text set to a static View Project Files, and re-write the link variable to the following:

var link = Iif(IsEmpty($datapoint["Project_Folder_URL"]), 'none', '-webkit-box')

 

Then adjust the HTML like so:

<div style="-webkit-box-orient:vertical; -webkit-line-clamp:{expression/maxDescriptionLines1}; display:{expression/project_url}; font-size:12px; font-weight:200; margin-bottom:0.3rem; opacity:0.6; overflow:hidden; padding:0.3rem 0; text-overflow:ellipsis"><a href="{Project_Folder_URL}">View Project Files</a></div>

 

That way you can effectively hide the entire element when no URL is present in the data, while also unambiguously providing the link information when there is any.