Populating a form based on user Identity

Q&A
1

Using Bonita version 7 community edition.
Using basic Javascript no added features or add ins.

I have been attempting to have my form appear customized, based on the user ID of who opens the form.
The form will display images and information relevant to that user/group.

I started with a simple test of getting an image to populate based on the ‘user_name’ of the person opening the form.
In order to accomplish this I created a local API call which returns a user name (Ex. ‘Bill.Smith’).
The API call is a variable on the form called ‘Identity’, so in order to get the username to appear in a text field you would need to type something to the effect of {{Identity.user_name}}.

The image itself will be populated in a custom widget.

In the Template of that custom widget:

No Image Found 
    </body>

In the controller of the custom widget:

function($scope){ var ID = 'Bill.Smith'; /* As long as this is set to 'Bill.Smith' img_one appears in the form. 'Jane.Doe' causes img_two to appear. */ 
if(ID === 'Bill.Smith'){
	document.getElementById('image').src = "img_one.gif";
	}
else if (ID === 'Jane.Doe'){
	document.getElementById('image').src = "img_two.png";
	}

}

What I am hoping to accomplish is that ‘var ID’ will assume the value of the actual user_name.
I have tried using the properties in the custom widget. ‘$scope.properties’ however this doesn’t appear to work.

Any advice about a strategy to get this working?
Has anyone tried this before?

2

In 6 you would have an invisible field on your page with name ID set to the contents of the process variable ID.

This way JavaScript will be able to interrogate the ID field and set the image.

if(document.getElementById('ID').innerHTML === 'Bill.Smith'){ document.getElementById('image').src = "img_one.gif"; }

I think this will also be the case in 7,

regards
Seán