How can i add text to a form in the Portal?

Steve_Barnard

We are working with a customer and they have requested to add a description to the Team Work and Team Request pages in the Portal. This is simply to inform Analysts what the difference is between the two pages. How can I achieve this? This would be text underneath the 'Team Requests' title. Is there a js file we can use?

joivan_hedrick

Yep, Very possible. you can do this one somewhat quickly with some js. 

var titleElement = $("h1.page_title:contains('Team Requests')");
var titleParentElement = titleElement.parent();
titleParentElement.append("<div class='text-muted'>All requests submitted by you or your team.</div>");

Or if you prefer one line:

$("h1.page_title:contains('Team Requests')").parent().append("<div class='text-muted'>All requests submitted by you or your team.</div>");

Next, you have to add it to the page. Since the page title loads at an odd time, you can't just add this directly to your custom.js. You'll need to either use a setTimeout() or something else to wait for the title to actually exist. In the example below, I went went a MutationObserver to wait for the title to exist, and add the subtitle afterwards. Paste this into your custom.js and it should work for you.

$(document).ready(function(){
    if (document.URL.indexOf("/View/9a06b0af-2910-4783-a857-ba9e0ccb711a") === -1) {
        //Ignore all other pages except for the Team Requests page.
        return; 
    }
    
    var mainPageNode = document.getElementById('main_wrapper');
    // create an observer instance that runs whenever the page changes. Wait for our page title to exist.
    var observer = new MutationObserver(function(mutations) {
        //The page changed. See if the page title exists yet.
        var elementToWatchFor = $(".page_title");
        if (elementToWatchFor.length > 0) {
            //An element with class of page_title exists.
            $("h1.page_title:contains('Team Requests')").parent().append("<div class='text-muted'>All requests submitted by you or your team.</div>");
            observer.disconnect();
        }
    });
     
    // Configure the observer.
    var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
     
    // pass in the node, and our mutationobserver options.
    observer.observe(mainPageNode, observerConfig);
});

joivan_hedrick

Yep, Very possible. you can do this one somewhat quickly with some js. 

var titleElement = $("h1.page_title:contains('Team Requests')");
var titleParentElement = titleElement.parent();
titleParentElement.append("<div class='text-muted'>All requests submitted by you or your team.</div>");

Or if you prefer one line:

$("h1.page_title:contains('Team Requests')").parent().append("<div class='text-muted'>All requests submitted by you or your team.</div>");

Next, you have to add it to the page. Since the page title loads at an odd time, you can't just add this directly to your custom.js. You'll need to either use a setTimeout() or something else to wait for the title to actually exist. In the example below, I went went a MutationObserver to wait for the title to exist, and add the subtitle afterwards. Paste this into your custom.js and it should work for you.

$(document).ready(function(){
    if (document.URL.indexOf("/View/9a06b0af-2910-4783-a857-ba9e0ccb711a") === -1) {
        //Ignore all other pages except for the Team Requests page.
        return; 
    }
    
    var mainPageNode = document.getElementById('main_wrapper');
    // create an observer instance that runs whenever the page changes. Wait for our page title to exist.
    var observer = new MutationObserver(function(mutations) {
        //The page changed. See if the page title exists yet.
        var elementToWatchFor = $(".page_title");
        if (elementToWatchFor.length > 0) {
            //An element with class of page_title exists.
            $("h1.page_title:contains('Team Requests')").parent().append("<div class='text-muted'>All requests submitted by you or your team.</div>");
            observer.disconnect();
        }
    });
     
    // Configure the observer.
    var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
     
    // pass in the node, and our mutationobserver options.
    observer.observe(mainPageNode, observerConfig);
});

Steve_Barnard

Thanks Joivan, this is exactly what I needed!