Dynamic username on dashboard welcome message

[cglowe]

I have a landing (homepage) dashboard that includes a text widget with welcome message.  I would like the welcome message to include the viewer's {username} or {first name}, but am not sure the best way to accomplish this.  Is there a native way through scripting?  Is BloX the best route?

[mattmca · Accepted solution]

I think your code should work if you add a couple pieces:

widget.on('ready', function(){
	
	var eleExists = document.getElementById("myPara");
    if(!eleExists){
       	const para = document.createElement("p");
		para.setAttribute("id", "myPara");
		const node = document.createTextNode("Welcome " + prism.user.firstName + "!");
		para.appendChild(node);
		const element = document.getElementById("editor-3");
		element.appendChild(para);
    }
})

It adds an id to your paragraph element and first checks to make sure that id doesn't exist before adding a new paragraph & text.

[mattmca]

There might be an easier way, but I know one way to accomplish this would be to add a script like this to the widget:

widget.on('ready', function(){
	document.getElementById("editor-3").innerHTML = "<font size=5>Welcome " + prism.user.firstName + "</font>"
})

You would just have to change the "editor-3" to whatever the id is of the div for the text in your text box.

[cglowe]

Thanks, that does work.  Does any additional text need to be generated from the script or can the welcome message be inserted before text added via the widget UI.  As is, any text that was created via the widget UI is hidden when the script is used.

I tried this, which successfully appended the welcome message, but would also generate an additional welcome message when actions like collapsing the filter menu were fired.

widget.on('processcell', function(){
const para = document.createElement("p");
const node = document.createTextNode("Welcome " + prism.user.firstName + "!");
para.appendChild(node);

const element = document.getElementById("editor-3");

element.appendChild(para);

[mattmca · Accepted solution]

I think your code should work if you add a couple pieces:

widget.on('ready', function(){
	
	var eleExists = document.getElementById("myPara");
    if(!eleExists){
       	const para = document.createElement("p");
		para.setAttribute("id", "myPara");
		const node = document.createTextNode("Welcome " + prism.user.firstName + "!");
		para.appendChild(node);
		const element = document.getElementById("editor-3");
		element.appendChild(para);
    }
})

It adds an id to your paragraph element and first checks to make sure that id doesn't exist before adding a new paragraph & text.

[harikm007]

@cglowe 

An alternate script : 

widget.on('domready', function(se, ev){
	firstName = prism.user.firstName
	lastName = prism.user.lastName
	userName = prism.user.userName
	ev.widget.style.content.html = '<font size=\"5\">' + userName + '</font>' //change this to update style and text
})

-Hari

[cglowe]

Thanks, that does work.  Does any additional text need to be generated from the script or can the welcome message be inserted before text added via the widget UI.  As is, any text that was created via the widget UI is hidden when the script is used.

I tried this, which successfully appended the welcome message, but would also generate an additional welcome message when actions like collapsing the filter menu were fired.

widget.on('processcell', function(){
const para = document.createElement("p");
const node = document.createTextNode("Welcome " + prism.user.firstName + "!");
para.appendChild(node);

const element = document.getElementById("editor-3");

element.appendChild(para);

[Alek_qbeeq · Accepted solution]

@cglowe You can also play with blox to get the desired effect.

Blox:

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "50%",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "❤️️ Welcome ️",
                                    "style": {
                                        "text-align": "center",
                                        "font-weight": "bold",
                                        "font-size": "24px",
                                        "margin-top": "50px",
                                        "margin-bottom": "50px",
                                        "margin-left": "50%",
                                        "text-aligment": "right"
                                    }
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "30%",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "️test",
                                    "id": "myUser",
                                    "style": {
                                        "text-align": "center",
                                        "font-weight": "bold",
                                        "font-size": "24px",
                                        "margin-top": "50px",
                                        "margin-bottom": "50px",
                                        "margin-left": "-70%",
                                        "color": "blue"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": []
}

widget script:

widget.on("ready", function (w, args) {
$("#myUser").text(prism.user.firstName + ' ' + prism.user.lastName)
})

This is just simple example but within column set you can put any TextBlock/data you want (static text, data from elasticube etc).