`, `` etc), as well as styles, classes to define your layout. Example: ```none return `

Name: ${$layerlink.name}

Status: ${$layerlink.status}

` ``` 3. **Test Your Arcade Expression** Click the **Run** button to test your expression. The result of the expression will be shown in the output panel. Once you are happy it’s working as expected, Save your expression. ![image-20260114-050405.png](media://5d47531c-dd1e-4d41-9809-60956e171df2) 4. **Preview Your Output** After saving your Arcade expression: - Select feature(s) on your map. - You’ll see the custom HTML layout rendered in place of the standard results table. ![image-20260114-045813.png](media://08e90cb3-5fe0-404c-9ce5-488321bc2ba7) --- ## Tips & Best Practice - Ensure you return **valid HTML** to avoid rendering issues. - Use CSS inline styles or classes to style your layout. - Handle missing values gracefully using `IIf(IsEmpty(...), "N/A", ...)` or similar. - For advanced users: embed icons, images, or hyperlinks dynamically using returned values. - Beware of inherited CSS styles. You may need to add the `white-space:initial` style to your outer `DIV` to prevent Experience Builder rendering new lines and other white space from your HTML. - Save your application regularly to avoid losing your work! > ✅ AI agents are great at building your HTML output. Many agents can generate the Arcade Expression from a screenshot of your LayerLink table view and a pencil sketch of your desired layout! --- ## When to Use This Use Arcade Expressions with Layer Links when you want to: - Show **business system data** in a specific format - Highlight key values with visual styling - Build a more polished or brand-aligned UI - Avoid the limitations of simple tabular display --- ## Video Walkthrough ![GVC Arcade Expressions.mp4](media://9dd61836-47ea-4dea-97b0-74a03023cfc0) --- ## Sample Arcade Expression This extreme example shows the code that was used to generate the sample layout shown in this article. The Arcade Expression includes some interesting snippets that you might want to use in your expressions. - Convert dates to friendly format using the `fmtDate()` function. - Convert currency to friendly format using the `fmtCurrency()` function. - Using fallback text in place of any `null` values returned using the `nz()` function. ``` // Helper Functions function nz(v, fallback) { return IIf(IsEmpty(v) || v == null, fallback, v) } function num(v) { return IIf(IsEmpty(v) || v == null, null, Number(v)) } function fmtCurrency(n) { return IIf(n == null || IsNaN(n), '-', '$' + Text(n, '#,###,###,##0')) } function fmtArea(n) { return IIf(n == null || IsNaN(n), '-', Text(n, '#,###,###,##0.##') + ' m²') } function fmtDate(d) { return IIf(IsEmpty(d) || d == null, '-', Text(Date(d), 'D MMM YYYY')) } function fmtDateTime(d) { return IIf(IsEmpty(d) || d == null, '-', Text(Date(d), 'D MMM YYYY h:mm A')) } function fmtPhone(p) { return Replace(p, '+61', '0') // Numbers start with +61 } // Store formatted $layerlink values into local variables var assessed = num($layerlink.assessedvalue__c) var lotSize = num($layerlink.lotsize__c) var name = nz($layerlink.name, '') var street = nz($layerlink.street__c, '') var city = nz($layerlink.city__c, '') var state = nz($layerlink.state__c, '') var postcode = nz($layerlink.postalcode__c, '') var owner = nz($layerlink.ownername__c, '-') var phone = fmtPhone($layerlink.phone_number__c) var propertyType = nz($layerlink.propertytype__c, '-') var scheme = nz($layerlink.planningscheme__c, '-') var dateBuilt = fmtDate($layerlink.datebuilt__c) var lastMod = fmtDateTime($layerlink.lastmodifieddate) var line1 = Trim(name) var line2 = Trim(street) var line3 = Trim(Concatenate(state, ' ', postcode)) var addressBlock = Concatenate( IIf(line1 != '', `

${line1}

`, ''), IIf(line3 != '', `

${line3}

`, '') ) // Build the return value. return `

${addressBlock}

Owner ${owner}

Phone ${phone}

Assessed value

${fmtCurrency(assessed)}

Lot: ${fmtArea(lotSize)}

Property type ${propertyType}	Planning scheme ${scheme}
Date built ${dateBuilt}	Last modified ${lastMod}