1

I have a calculated column with the format of "number" in a list. However, within the display form webpart, the default settings actually returns a string with quotes " instead of returning it as a number on the screen.

Not wanting the quotes in this field, I have been trying to use some script to remove them. From looking at the page, I wrote something like this:

function calColFix() {
    var planLink = document.getElementById("SPFieldCalculated");

    if (planLink) {
        // RemoveChar is a custom function that returns a string with all
        // the designated character(s) eliminated (in this case, the quotes get removed)
        planLink.innerHTML = RemoveChar(planLink.innerHTML, '"');
    }
}

I then called this by putting this within the JS file:

_spBodyOnLoadFunctionNames.push("calColFix");

And, it isn't working. On checking the execution, the text apparently have not yet been generated by the time the code was ran. I am seeing what options there may be for removing the quotes for a particular calculated field on the display form view.

I also tried content editor instead of JSLink, and it is not cooperating either. So, seeing if there are other ways this can be achieved!

Thanks!! :>


Edits - added the line that we are dealing with... On inspect~~

So, I actually realized that the issue is because this really isn't innerHTML (shhhh, I know), it worked after I updated the function. The issue with execution was not replicated after I rewrited parts of the code, so I wasn't sure what might have prompted it to be span...../span when I was trying it initially.

  • Check your console for what errors you are getting there.and if your js is not getting load then you can add function to your page directly from SharePoint designer.This might be helpful to you:sharepoint.stackexchange.com/questions/45194/… – SynozeN Technologies May 10 '17 at 5:17
  • Please paste your Formula and a screenshot of the result with ", You should not need any extra code – Danny '365CSI' Engelman May 10 '17 at 6:15
  • The function was getting load, but at call, it showed up as an empty <span ...> </span> instead of the calculated. Let me make some edits to clarify. – Isa May 10 '17 at 13:29
  • Please include the contents of your Calculated Formula, I presume you are stuffing HTML in there? (I answer almost all questions on this topic) – Danny '365CSI' Engelman May 10 '17 at 17:02
  • =IF(ISBLANK(SiteURL),"URL Missing",("<a href='"&SiteURL&"' target='_blank' alt='Open site in new window'><img src="&CHAR(34)&"/teams/tkstd/SiteAssets/link.png"&CHAR(34)&" style='height:35px; width:35px;' /></a>")) – Isa May 11 '17 at 15:21
0

So, I think it worked now after the edit when I no longer use innerHTML~

// This worked just fine in JSLink
_spBodyOnLoadFunctionNames.push("calColFix");

//-----------------------------------------------------------------------------
// Utility Functions
//
// Function Name        isNumeric
// Function Purpose:    Check if number is numeric or not
//
// Function Name:       RemoveChar
// Function Purpose:    Removes all characters from the string and returns it
//
// Function Name:       getAttrVal
// Function Purpose:    Get the value of a certain attribute of a HTML tag

function getAttrVal (tag, attr) {
    //tag is the DOM object
    //attr is the attribute name
    return BLABLABLA;
}

//
// Function Name:       getElementsById
// Function Purpose:    Returns array of all DOM elements with that ID
//
// Function Name:       calColFix
// Function Purpose:    Make plan link work again!

function calColFix() {
    var planLink;
    var arrCalCol = getElementsById("SPFieldCalculated");

    // Loop through all the items to find the ones I wanted (links)
    for (i=0; i < arrCalCol.length; i++) {
        // Custom criteria, all my links are in <a ...> tags
        if (arrCalCol[i].innerHTML.search("&lt;a") != -1 ||     arrCalCol[i].innerHTML.search("<a") != -1) {
            // Get the element & make some new ones
            var planLink = arrCalCol[i];
            var node = document.createElement("a");
            var pic = document.createElement("img");

            // Get the nice little link icon!
            pic.src = "/teams/tkstd/SiteAssets/link.png"
            pic.style = "height:35px; width:35px";

            // And add it to the <a> element, and put the rest of the stuff in
            node.appendChild(pic);
            node.href = getAttrVal(planLink.innerHTML,"href");
            node.target = getAttrVal(planLink.innerHTML,"target");
            node.alt = getAttrVal(planLink.innerHTML,"alt");

            // my getElementsByID() may have some bugs, catching if something went wrong. 
            if (planLink) {
                // Clean the text and add the new elements!
                planLink.innerHTML = "";
                planLink.appendChild(node);
            }
        }
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.