Custom Filtering to allow users to filter for specific zip codes

Hi Astroraf​ ,

please try the following code.  I put something together per your requirement as an example:

The JSON body is as follows:

{
    "title": "ZIP Filter",
    "body": [
        {
            "type": "TextBlock",
            "text": "Paste ZIPs (comma/space/newline), then Apply or Clear",
            "wrap": true,
            "style": {
                "margin-bottom": "8px"
            }
        },
        {
            "type": "Input.Text",
            "id": "zipbox",
            "isMultiline": true,
            "placeholder": "e.g. 90001, 90002 …",
            "style": {
                "height": "120px",
                "border": "1px solid #cbd5e1",
                "background": "#fff",
                "padding": "8px",
                "border-radius": "8px"
            }
        }
    ],
    "actions": [
        {
            "type": "echoZip",
            "title": "Debug: Echo"
        },
        {
            "type": "applyZipFilter",
            "title": "Apply ZIP Filter",
            "opts": {
                "title": "ZIP Code",
                "dim": "[Address.ZipCode]",
                "datatype": "text",
                "save": false
            }
        },
        {
            "type": "applyZipFilter",
            "title": "Clear",
            "opts": {
                "title": "ZIP Code",
                "dim": "[Address.ZipCode]",
                "datatype": "text",
                "clear": true,
                "save": false
            }
        }
    ]
}

There are two Actions for this Blox Dashboard as well:

echoZip is for testing the code:

(function (payload) {
  var ID = "zipbox";

  function getRoot(p) {
    try {
      var w = p && p.widget;
      var cand = [
        p && p.element,
        w && w.element && (w.element.nodeType ? w.element : (w.element[0] || null)),
        w && w.$el && w.$el[0],
        w && w.el && w.el[0]
      ];
      for (var i = 0; i < cand.length; i++) {
        if (cand[i] && cand[i].querySelector) return cand[i];
      }
    } catch (e) {}
    return document;
  }

  function readZip(p) {
    if (p && p.inputs && p.inputs[ID] != null) return String(p.inputs[ID]);
    var st = p && p.widget && p.widget.scope && p.widget.scope.state;
    if (st && st[ID] != null) return String(st[ID]);
    var root = getRoot(p);
    var el = root.querySelector("#" + ID) || document.querySelector("#" + ID);
    return el ? (typeof el.value === "string" ? el.value : (el.textContent || "")) : "";
  }

  var root = getRoot(payload);
  var v = readZip(payload);

  alert("inputs/state/DOM resolved value:\n" + JSON.stringify(v) +
        "\n\nroot used: " + (root === document ? "document" : "widget DOM"));
})(payload);

and applyZipFilter to take the action:

(function (payload) {
  var opts = (payload && payload.opts) || {};
  var dash = prism.activeDashboard;
  var ID = "zipbox";

  function getRoot(p) {
    try {
      var w = p && p.widget;
      var cand = [
        p && p.element,
        w && w.element && (w.element.nodeType ? w.element : (w.element[0] || null)),
        w && w.$el && w.$el[0],
        w && w.el && w.el[0]
      ];
      for (var i = 0; i < cand.length; i++) {
        if (cand[i] && cand[i].querySelector) return cand[i];
      }
    } catch (e) {}
    return document;
  }

  function readZip(p) {
    if (p && p.inputs && p.inputs[ID] != null) return String(p.inputs[ID]);
    var st = p && p.widget && p.widget.scope && p.widget.scope.state;
    if (st && st[ID] != null) return String(st[ID]);
    var root = getRoot(p);
    var el = root.querySelector("#" + ID) || document.querySelector("#" + ID);
    return el ? (typeof el.value === "string" ? el.value : (el.textContent || "")) : "";
  }

  var raw = readZip(payload);

  // Clear path (explicit or empty)
  if (opts.clear || !String(raw).trim()) {
    try {
      var items = (dash.filters && (dash.filters.$$items || dash.filters.items)) || [];
      var existing = items && items.find(function (f) { return f && f.jaql && f.jaql.dim === opts.dim; });
      if (existing) (dash.filters || dash.$$model.filters).remove(existing);
      dash.refresh();
    } catch (e) { console.error("ZIP clear failed", e); }
    return;
  }

  // Parse & de-dupe
  var asNumeric = String(opts.datatype || "text").toLowerCase() === "numeric";
  var parts = String(raw).split(/[\s,;|]+/g).filter(Boolean);
  var seen = Object.create(null), members = [];
  for (var i = 0; i < parts.length; i++) {
    var v = parts[i].trim();
    if (!v) continue;
    if (asNumeric) { if (!/^\d+$/.test(v)) continue; v = Number(v); }
    if (!seen[v]) { seen[v] = 1; members.push(v); }
  }
  if (!members.length) { alert("No valid ZIPs parsed."); return; }

  var filterObj = {
    jaql: {
      dim: opts.dim,                         // paste the exact dim from Filter ▸ ⋮ ▸ Advanced
      title: opts.title || "ZIP Code",
      datatype: asNumeric ? "numeric" : "text",
      filter: { explicit: true, multiSelection: true, members: members }
    }
  };

  try { (dash.filters || dash.$$model.filters).update(filterObj, { refresh: true, save: !!opts.save }); }
  catch (e1) { (dash.filters || dash.$$model.filters).update([filterObj], { refresh: true, save: !!opts.save }); }
})(payload);

How to test this script:

1) type zip code example: 90001, 90002,
2) click Debug: Echo (you should see the value),
3) then Apply ZIP Filter (pill should appear),
4) and Clear (pill removed).

Hi Astroraf​,

Thank you for reaching out. I see your question hasn't gotten a response yet, so I'm asking internally to try and get you an answer. 

Hi Astroraf​ ,

I’m following up to see if the solution offered by Vicki786​ worked for you.

If so, please click the 'Accept as Solution' button on their post. That way others with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.

I actually created a solution, thanks DRay​ 

For anyone interested we would be happy to walk through our solution,  please contact me at [email protected]