[ArasLabs/custom-form-css] Customized contents of item_info field

aras_labs_custom_item_info.html

<span id="ITEM_INFO_INTERNAL_SPAN" class="info_group" style="display:block;"></span>

<script> 
  populate_ITEM_INFO_INTERNAL_SPAN = function()
  {
    document.getElementById("ITEM_INFO_INTERNAL_SPAN").innerHTML = top.aras.uiDrawItemInfoTable(document.itemType);
    top.aras.uiPopulateInfoTableWithItem(document.item, document);

    // apply customizations in separate function
    style_ITEM_INFO_INTERNAL_SPAN();
  }

  style_ITEM_INFO_INTERNAL_SPAN = function()
  {
    // override default icon style
    var lg_icn = document.getElementById("large_icon_img");
    lg_icn.style = '';

    var tbl = document.getElementById("itemInfoTable");
    tbl.style.marginTop = "45px";

    // add element to display styled state
    var container = document.getElementById("ITEM_INFO_INTERNAL_SPAN");
    var stateLabel = document.createElement("span");
    stateLabel.className = "my_state";
    container.appendChild(stateLabel);

    // set value of new state element
    var stateValue = document.getElementById("itemProps$state");
    stateValue = stateValue.textContent;
    stateLabel.innerHTML = stateValue.toUpperCase();

    // style new state element color based on LC state
    if (stateValue == "Released")
        stateLabel.style.color = "red"; 

    if (stateValue == "Preliminary")
        stateLabel.style.color = "green"; 

    // hide default state property in table
    var stateRow = document.getElementById("state_row");
    stateRow.style.visibility = "hidden";
    stateRow.style.display = "none";

    // display classification as title
    var thisItem = document.thisItem;
    var classification = thisItem.getProperty("classification","Part");
    var titleEl = document.getElementById("label_span");
    titleEl.innerHTML = classification;
  }

// populate item_info table onLoad
window.addEventListener("load", populate_ITEM_INFO_INTERNAL_SPAN);

</script>