Forum Discussion

cglowe's avatar
cglowe
Cloud Apps
02-08-2022
Solved

Dynamic username on dashboard welcome message

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?

dashboards & reporting
  • mattmca's avatar
    mattmca
    02-09-2022

    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.

  • Alek_qbeeq's avatar
    Alek_qbeeq
    02-09-2022

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

6 Replies

Replies have been turned off for this discussion
  • mattmca's avatar
    mattmca
    Cloud Apps
    02-08-2022

    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's avatar
      cglowe
      Cloud Apps
      02-08-2022

      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's avatar
        mattmca
        Cloud Apps
        02-09-2022

        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's avatar
    harikm007
    Data Warehouse
    02-08-2022

    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's avatar
      cglowe
      Cloud Apps
      02-08-2022

      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's avatar
        Alek_qbeeq
        Cloud Apps
        02-09-2022

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