# core.customizeColumns

Extends the listing view capabilities by implementing a range of customizations, such as controlling one or more column's looks or usability through the addiction of a button for example.

# Usage:

core.customizeColumns("<definition-name>",  {
		<field_definition_name>: function (columnCellContainer, esDoc, colDef){
		   ...
		}
});

Arguments:

Argument Description Required
definition-name Refers to the name of the specific definition to which you want to apply the customization. YES
field_definition_name Refers to the field name of the definition we want to apply the customization to - the name of the column we want to customize. Case sensitive. YES

Function arguments:
Argument Description
columnCellContainer Contains the HTML node correspondent to the cell we're customizing.
esDoc Contains the indexed instance object.
colDef Target column description.

# Examples:

In the example below, we'll include a button for every ticket in the 'Open' state without an assigned Responsible. The aim is for the end user to click the button to self-assign the responsibility and then be redirected to the instance editor to view more details.

import axios from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

cob.custom.customize.push(function (core, utils, ui) {
  const DEFINITION = "Tickets";

  $(document).on("click", "button.js-assign-me", async (ev) => {
    const instanceId = ev.target.parentNode.dataset.instanceid
    const updates = {
      "type": DEFINITION,
      "condition": `id:${instanceId}`,
      "values": {
        "Responsible": core.getCurrentLoggedInUserUri()
      }
    }

    await axios.put("/recordm/recordm/instances/integration", updates)
    core.navigateTo(`#/instance/${instanceId}`)
  })

  core.customizeColumns(DEFINITION, {
    "Responsible": function (columnCellContainer, esDoc, colDef) {
      if (esDoc.state?.[0] === "Open" && !esDoc.responsible?.length) {
        const closeBtn = `<button data-instanceId="${esDoc.instanceId}" class='js-assign-me px-2 text-xs text-bold bg-gradient-to-t from-cyan-200 to-cyan-400 rounded-md'><i class='icon-ok mr-1'></i><span>Assign to Me and Start Working</span></button>`;
        columnCellContainer.insertAdjacentHTML("beforeend", closeBtn);
      }
    }
  })
});