Using javascript to set the value of a label to a string defined in attributes

Ross Curtis

The current issue we're having with OPA is that we generate the html for an email to be sent out via a connector service.

Ideally we need to display this to the user in a label prior to submission with the html formatting rendering out. With substitution this appears to be blocked.

It's been suggested that this should be possible using js to bring the value through to the front end.

I think in principle I understand what needs doing based on some reading on the documentation and a look at the example projects, though I'm a C# developer and javascript is something I have very rarely touched so this is a learning curve.

What I'm after doing is essentially setting the label value to the attribute value so that the html renders.

So I've set up the opm.extension.data.json file to contain the name of the attribute value I want to use like

["emailbody"]

I've also created a property on the test label so as to be able to identify and work with it.

The script I'm trying to run is:

OraclePolicyAutomation.AddExtension({
  fullCustomInput: function(control, interview) {
    var extensionData = interview.getExtensionData();
		if (control.getProperty("type") === "body") {
			return {
				mount: function(el) {
					control.setValue(extensionData["emailbody"]);
				}
			}
		}
  }
});

However it doesn't seem to work and I'm not entirely sure how I would debug this. Any pointers?

Richard Napier

Hi Ross

To display the value of an attribute on a label, you would expect to use the customLabel extension.

/*  Generated by the intelligent-advisor.com Website Code Generator 27/06/2022 14:05
 Boilerplate Code of Custom Label Extension for Intelligent Advisor fka Policy Automation
 I will remember this is for demonstration purposes only. 
*/
OraclePolicyAutomation.AddExtension({
    customLabel: function(control, interview) {
        if (control.getProperty("type") == "body") {
            return {
                mount: function(el) {
                    console.log("Starting type:emailbody customLabel Mount");
                    var div_parent = document.createElement("div");
                    div_parent.id = "emailbody_parent";
                    var div = document.createElement("div");
                    div.id = "emailbody";
                    div.innerHTML = interview.getValue("emailbody");
                    div_parent.appendChild(div);
                    el.appendChild(div_parent);
                    console.log("Ending type:emailbody customLabel Mount");
                }
            }
        }
    }
})

A simple example based on your post is shown above. The JSON file simply "authorizes" the developer to use the attribute(s) listed on Screens where the attribute is not present. By default the attribute must be on the Screen for JS to be able to access it. The actual process of creating the label is down to the developer, so it is (in this case ) just an HTML div which is populated with the value of the attribute (assuming you have set that attribute in a rule or on some other Screen.

The example I just used is attached.

Cheers

Richard

Ross_Email.zip

Richard Napier

Hi Ross

To display the value of an attribute on a label, you would expect to use the customLabel extension.

/*  Generated by the intelligent-advisor.com Website Code Generator 27/06/2022 14:05
 Boilerplate Code of Custom Label Extension for Intelligent Advisor fka Policy Automation
 I will remember this is for demonstration purposes only. 
*/
OraclePolicyAutomation.AddExtension({
    customLabel: function(control, interview) {
        if (control.getProperty("type") == "body") {
            return {
                mount: function(el) {
                    console.log("Starting type:emailbody customLabel Mount");
                    var div_parent = document.createElement("div");
                    div_parent.id = "emailbody_parent";
                    var div = document.createElement("div");
                    div.id = "emailbody";
                    div.innerHTML = interview.getValue("emailbody");
                    div_parent.appendChild(div);
                    el.appendChild(div_parent);
                    console.log("Ending type:emailbody customLabel Mount");
                }
            }
        }
    }
})

A simple example based on your post is shown above. The JSON file simply "authorizes" the developer to use the attribute(s) listed on Screens where the attribute is not present. By default the attribute must be on the Screen for JS to be able to access it. The actual process of creating the label is down to the developer, so it is (in this case ) just an HTML div which is populated with the value of the attribute (assuming you have set that attribute in a rule or on some other Screen.

The example I just used is attached.

Cheers

Richard

Ross_Email.zip

Richard Napier

Continued...

So assuming you have an email body like this:

Your interview will show the following on a Screen using the JavaScript Extension provided above:

From the Interview tab, this is the Screen at design time. The label is just added like any other label, and the text will in any case be overwritten by your Extension:

If you are interested there are some examples to complement those listed in the online documentation, on our site https://intelligent-advisor.com/main/the-javascript-extensions/

Hope this helps

Richard

Ross Curtis

Thanks Richard, really appreciate the detailed response. Explains a great deal about the use of this kind of functionality.

Ian G Clough

Hi Ross,

As a small refinement you could use an input control (set to always readonly) and then use the control value directly, that way your display will work for other attribute values and you don't need extension data.

fullCustomInput: function(control, interview) {

    if (control.getProperty("type") == "body") {

      return {

        mount: function(el) {

          console.log("Starting type:emailbody customLabel Mount");

          var div_parent = document.createElement("div");

          div_parent.id = "emailbody_parent";

          var div = document.createElement("div");

          div.id = "emailbody";

          div.innerHTML = control.getValue();

          div_parent.appendChild(div);

          el.appendChild(div_parent);

          console.log("Ending type:emailbody customLabel Mount");

        },

        update: function(el) {},

        unmount: function(el) {

          console.log("Starting type:emailbody customLabel UnMount");

          console.log("Ending type:emailbody customLabel UnMount");

        }

      }

    }

  }