How can I add a block of text to the Home page?

NIcholas_Scott

I want to include a paragraph with some instructions to our end users on how to use the portal on the Home page. How do I go about adding text to the Home page? I'm looking to add the text where this red box is.

john_doyle

@NIcholas_Scott,
You can try adding this code to the custom.js file:

$(window).load(function() {<br>	if (window.location.pathname == "/View/94ecd540-714b-49dc-82d1-0b34bf11888f")<br>		$("#alertMessagesContainer").before("<div class='col-md-12'>Some useful information</div>");<br>});

Change the pathname if necessary to match the Home page you are using and then add the HTML code you require.

john_doyle

@NIcholas_Scott,
You can try adding this code to the custom.js file:

$(window).load(function() {<br>	if (window.location.pathname == "/View/94ecd540-714b-49dc-82d1-0b34bf11888f")<br>		$("#alertMessagesContainer").before("<div class='col-md-12'>Some useful information</div>");<br>});

Change the pathname if necessary to match the Home page you are using and then add the HTML code you require.

NIcholas_Scott

Thanks! That worked perfectly! It's a lot better than the 10-15 lines of code I was trying to do.

Ann-Christin_Weiergr

I want to do the same described here. I'm struggling to add the text after the "Home". I added code in the onload function only for endusers on the homepage, but I'm not able to add the text at the required position. Can you give me an example how to add the paragraph after the headline "Home"?

Mikkel_Madsen

@Ann-Christin_Weiergr what do you have so far - can you share your code?

Ann-Christin_Weiergr

I tried different approaches e.g. described here: https://community.cireson.com/discussion/comment/4217#Comment_4217

My current approach is the following:

$(window).on("load",function () {

if (!session.user.Analyst && window.location.href.indexOf('IDofHomepage') > -1){

text = $('<h4>Das ist die Beschreibung</h4>')

$('h1').after(text);

}}

Thanks!

Mikkel_Madsen

Here you go - I don't know if you already has a script loader in your custom.js but else this is the full guide 😊

Place this code in your custom.js file:

/* ----------------------------------------------- */
/* -------------- Script Loader V2 --------------- */
/* ----------------------------------------------- */


// This helps with loading scripts and debugging
// Pass in the path of the js file and an array of url segments on which to run this code
// EG loadScript("/CustomSpace/CustomExtension/CustomExtension.js",["ServiceRequest","Incident"]);
var loadScriptV2 = function (path,urls) { 
	urls.forEach(function(url){	
		if(window.location.href.indexOf(url) !== -1){ // Verify we are on the valid page
		
			var result = $.Deferred(),
				script = document.createElement("script");
			script.async = "async";
			script.type = "text/javascript";
			script.src = path;
			script.onload = script.onreadystatechange = function(_, isAbort) {
				if (!script.readyState || /loaded|complete/.test(script.readyState)) {
					if (isAbort)
						result.reject();
					else
						result.resolve();
				}
			};
			script.onerror = function () { result.reject(); };
			$("head")[0].appendChild(script);
			console.log("Loaded " + path)
			return result.promise();
		}
	})
};


/* ----------------------------------------------- */
/* ------------- END Script Loader V2 ------------ */
/* ----------------------------------------------- */

//Load your script - filepath, [array of sites where you want to load your script]
loadScriptV2('/CustomSpace/AddTextToHome.js',["94ecd540-714b-49dc-82d1-0b34bf11888f"]);

Then put this code into af file called AddTextToHome.js and place it in your CustomSpace folder

$(document).ready(function() {
	
	//Checks if the user is an analyst - if yes, then exit
	if (session.user.Analyst) {
		console.log("AddTextToHome.js: User is Analyst, exiting...");
		return;
	}
	
	//The navigation node doesn't load immediately. Get the main div that definitely exists.
	var mainPageNode = document.getElementById('main_wrapper');


	
     // create an observer instance
	var observer = new MutationObserver(function(mutations) {
		
		if ($('.page_title').length > 0) {
			//An element with class of page_title exists.
			
			//We are done observing.
			observer.disconnect();
			
			//The htmlcode you want to insert into the site
			htmlCode = '<h4>Das ist die Beschreibung</h4>'
			
			//The element where you want to put your code after
			$('.page_title').after(htmlCode);
		}
	});
     
	// configure the observer and start the instance.
	var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
	observer.observe(mainPageNode, observerConfig);
});