cancel
Showing results for 
Search instead for 
Did you mean: 

Dynamic username on dashboard welcome message

cglowe
8 - Cloud Apps
8 - Cloud Apps

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?

2 ACCEPTED SOLUTIONS

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.

View solution in original post

@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).

View solution in original post

6 REPLIES 6

mattmca
9 - Travel Pro
9 - Travel Pro

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.

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);

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
13 - Data Warehouse
13 - Data Warehouse

@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

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);

@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).