Pass info from record to Iframe widget

Community Alums · 3 weeks ago

Hello all, I'll try and explain this best I can.

I've created a portal widget, for security reasons I'm going to call the page "sp/exec".
To make it easily accessible I have then created an IFrame widget in a dashboard to said widget.

This works all well and good without an issue, however... There's a catch.

I have a UI action which runs on a "table" to the dashboard which looks like this...

action.setRedirectURL('now/nav/ui/classic/params/target/%24pa_dashboard.do%3Fsysparm_dashboard%3D29f056a11b9ba290408c4156b04bcb94');

To loosely explain the widget it essentially takes 3 sets of criteria such as the current record id, its parent and the parent of the parent to display data.

All this information exists on the record on the UI action redirect so my question is... Is there a way to pass the current record data through to the widget on the dashboard?

Thanks in advance!

Andrew

ChrisBurks · 3 weeks ago

The client controller script and the server script that I provided are the whole scripts for each respective section. From your post it looks like you copied the whole script and just placed them within yours. That's not going to work. Just take the portions needed and place them appropriately within yours. For instance take the client controller script.

Look at the beginning of yours

function($scope, $sce) {
$scope.c = this;

...

And then the beginning of mine

api.controller=function($window) {
  var c = this;

See the similarity? The only portion of the beginning of my script that is needed is the "$window".

For example to incorporate what I have into yours start off with:

function($scope, $sce, $window) {
$scope.c = this;

Then only take the following portion of my script

var locationPath = $window.parent.location.search;
  var params = locationPath.split("&")
  .filter(function(param){
	return param.match(/child_id/);
  });

  if(params.length) {
	var inputsObj = {};
	inputsObj.action = "ADD_PARAMS";
	params.forEach(function(param){
		var keyValue = param.split("=");
		inputsObj[keyValue[0]] = keyValue[1];
		if(keyValue[0] == 'child_id')
			c.param = keyValue[1];
	});
	c.server.get(inputsObj).then(function(resp){
		c.data.child_number = resp.data.child_number;
		c.data.parent_number = resp.data.parent_number;
		c.data.grandparent_number = resp.data.grandparent_number;
	});
  }

And place it in the appropriately place in your script.

And then it's the same for the server script. The only portion that is needed for yours is this

if(input && input.action == "ADD_PARAMS") {
	
	var taskGr = new GlideRecord('task');
	if(taskGr.get(input.child_id)) {
		data.child_number = taskGr.getValue('number');
		data.parent_number = taskGr.parent.getDisplayValue('number');
		data.grandparent_number = taskGr.parent.parent.getDisplayValue();
	}
 }

You'll have to figure out where the portions of the scripts appropriately fit into your script but the general idea is that the information needs to happen as early as possible since it's going to be needed either on load or once interaction starts.

Also, are you sure the server script is going to meet your needs. As my script was just a demonstration on how it's possible to use the data retrieved that was retrieved from the URL parameter.

Notes:

// within the client script

//gets all parameters from the top most frame of the web page
var locationPath = $window.parent.location.search;

// for an HTTP URL anything after a question mark "?" is considered a URL parameter. A parameter is constructed like a key/value pair and each parameter is separated by an ampersand "&"
//The following statement uses a split to create an array of the parameters 
// Then it leverages the in-built array method .filter to grab only the parameter that is designated by the key "child_id"
  var params = locationPath.split("&")
  .filter(function(param){
	return param.match(/child_id/);
  });

//if the child_id parameter exists then run the code block
  if(params.length) {
        //Sending data back to the server takes an object and its properties are treated as the input object 
        // thus create an object placeholder to be filled in by iterating through the params array
	var inputsObj = {};

       // add an action property to use on the server side to identify it
	inputsObj.action = "ADD_PARAMS";

       //Use the in-built array method .forEach to iterate through the params array and set properties and values on the inputsObj
	params.forEach(function(param){
               //split the parameter between its key and value as the syntax as a URL parameter is "key=value"
		var keyValue = param.split("=");
		inputsObj[keyValue[0]] = keyValue[1];

        //This part is not necessarily needed. I used this to display the value of the child_id parameter in my html markup
		if(keyValue[0] == 'child_id')
			c.param = keyValue[1];
	});

       //Send that data to the server side to process and wait for the promise (.then) and update any necessary variables to refresh the visible variables in the view (rendered html)
	c.server.get(inputsObj).then(function(resp){
		c.data.child_number = resp.data.child_number;
		c.data.parent_number = resp.data.parent_number;
		c.data.grandparent_number = resp.data.grandparent_number;
	});
  }

I didn't comment on the server script because it should be self explanatory as it's just a basic GlideRecord query script fetching a specific record based on a sys_id and then setting properties and values on the data object in the widget.

I hope this clears up some things.

Let me know.

View solution in original post

Community Alums · 3 weeks ago

Thanks for the clarification. You diamond, working a treat!