nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Remove gaps in list from hidden fields

dwold

I am hiding fields that have Null values in a list. The good news is the fields are hidden, the bad news is it creates a gap or holds that empty row in the list creating large gaps between some of the data. Is there a way to remove the gaps in the list?

var org_status = IIf(IsEmpty($datapoint.built_lost_maintained), 'hidden', 'visible')
var Built = IIf(IsEmpty($datapoint.explain_built), 'hidden', 'visible')
var Lost = IIf(IsEmpty($datapoint.explain_lost), 'hidden', 'visible')
var Maintain = IIf(IsEmpty($datapoint.explain_maintained), 'hidden', 'visible')

return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
   attributes: {
     org: org_status,
     explainBuilt: Built,
     explainLost: Lost,
     explainMaintain: Maintain
   }
}

Line item template:

@jcarlson

@KenBuja

Find more posts tagged with

Accepted answers

jcarlson

A line item template will skip the entire line if the whole thing is blank. Since your expression just changes the visibility tag, there's still HTML in there taking up space.

An alternative would be to put the entire div into your expression, like this:

var org_status = Iif(
  IsEmpty($datapoint.built_lost_maintained),
  '',
  `<div><u><em>Has your organization built, lost, or maintained target capacity:</em></u>${$datapoint.built_lost_maintained}</div>`
)

Then in your line item template, just put {expression/org} to insert the entire HTML element.

All comments

dwold

@jcarlson thank you so much. I really appreciate the help! I also tried this with some success but instead of no gaps, it is all one single line despite using the TextFormatting.NewLine. Do you see anything I could change to get separate rows for each field? 😀

var result = "";
//if (!IsEmpty($datapoint.Phone)) {
    //result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>Phone: </i></span>` + $datapoint.Phone;
//}
if (!IsEmpty($datapoint.staffing_assignment)) {
    result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>How many personnel would you assign to this role: </i></span>` +$datapoint.staffing_assignment;
}
if (!IsEmpty($datapoint.staffing_assignment_2)) {
    result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>How many are currently assigned: </i></span>` +$datapoint.staffing_assignment_2;
}
if (!IsEmpty($datapoint.staffing_assignment_3)) {
    result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>Minimum staffing required to accomplish this core capability: </i></span>` +$datapoint.staffing_assignment_3;
}
if (!IsEmpty($datapoint.built_lost_maintained)) {
    result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>Has your complany built, lost, or maintained target capacity: </i></span>` +$datapoint.built_lost_maintained;
}
if (!IsEmpty($datapoint.explain_built)) {
    result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>Built Explanaition: </i></span>` +$datapoint.explain_built;
}
if (!IsEmpty($datapoint.explain_lost)) {
    result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>Lost Explanaition: </i></span>` +$datapoint.explain_lost;
}
if (!IsEmpty($datapoint.explain_maintained)) {
    result += TextFormatting.NewLine + `<span style="color:#ffffbe"><i>Maintained Explanaition: </i></span>` +$datapoint.explain_maintained;
}


return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
   attributes: {
     result
   }
}

jcarlson

Strange... When I tested something similar, I didn't see that.

Another way to handle this is with an Array and a Filter and a single output string using Concatenate.

var string_arr = [
  Iif(IsEmpty($datapoint.family_of_service), '', 'html string here'),
  etc,
  etc
]

// create inverse of IsEmpty function for filter
function NotEmpty(val) { return !IsEmpty(val) }

// filter your html strings
string_arr = Filter(string_arr, NotEmpty)

// return non-empty divs separated by line breaks
return Concatenate(string_arr, '<br>')

dwold

@jcarlson I thought I had it working but for some reason, it still creates a gap for empty value. Do you see anything in my code I am missing?

//var phone = IIf(IsEmpty($datapoint.phone), '', `<div><span style="color:#ffffbe"><i>Phone: </i></span>${$datapoint.Phone}</div>`)
var family = IIf(IsEmpty($datapoint.family_of_service), '', `<div><span style="color:#ffffbe"><i>Family of Service: </i></span>${$datapoint.family_of_service}</div>`)
var staff = IIf(IsEmpty($datapoint.staffing_assignment), '', `<div><span style="color:#ffffbe"><i>How many personnel would you assign to this role: </i></span>${$datapoint.staffing_assignment}</div>`)
var staff2 = IIf(IsEmpty($datapoint.staffing_assignment_2), '', `<div><span style="color:#ffffbe"><i>How many are currently assigned: </i></span>${$datapoint.staffing_assignment_2}</div>`)
var staff3 = IIf(IsEmpty($datapoint.staffing_assignment_3), '', `<div><span style="color:#ffffbe"><i>Minimum staff to accomplish core capabilty: </i></span>${$datapoint.staffing_assignment_3}</div>`)
var org_status = IIf(IsEmpty($datapoint.built_lost_maintained), '', `<div><span style="color:#ffffbe"><i>Has your organization built, lost, or maintained target capacity: </i></span>${$datapoint.built_lost_maintained}</div>`)
var built = IIf(IsEmpty($datapoint.explain_built), '', `<div><span style="color:#ffffbe"><i>Explain built: </i></span>${$datapoint.explain_built}</div>`)
var lost = IIf(IsEmpty($datapoint.explain_lost), '', `<div><span style="color:#ffffbe"><i>Explain lost: </i></span>${$datapoint.explain_lost}</div>`)
var maintain = IIf(IsEmpty($datapoint.explain_maintained), '', `<div><span style="color:#ffffbe"><i>Explain maintained: </i></span>${$datapoint.explain_maintained}</div>`)

return {

  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
   attributes: {
     //phone,
     family,
     staff,
     staff2,
     staff3,
     org_status,
     built,
     lost,
     maintain
   }
}

dwold

@jcarlson worked great. Thank you!!!

jcarlson

A line item template will skip the entire line if the whole thing is blank. Since your expression just changes the visibility tag, there's still HTML in there taking up space.

An alternative would be to put the entire div into your expression, like this:

var org_status = Iif(
  IsEmpty($datapoint.built_lost_maintained),
  '',
  `<div><u><em>Has your organization built, lost, or maintained target capacity:</em></u>${$datapoint.built_lost_maintained}</div>`
)

Then in your line item template, just put {expression/org} to insert the entire HTML element.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.