Custom JavaScript on multiple subgrids

[jaja4114]

Hi

@OliverRodrigues 

I am currently trying to replicate what Oliver showed in this blog post. 

https://oliverrodrigues365.com/2020/11/22/power-apps-portals-javascript-tip-03-load-edit-modal-after...

I have multiple subgrids on one of my multistep form steps and was wondering how to specify which subgrid I am targeting and if that is necessary?

Would appreciate it if someone could help.

[fm_skeller]

You can use the attribute metadata, that needs to be present to show the subgrid anyway, to add a specific class to the subgrid and use that class to target it.

Another option would be to use the ID - it's should be the same as the id of the subgrid on the power apps form - to target a specific subgrid.

[OliverRodrigues · Accepted solution]

You can use the ID, that's probably the best for subgrid. Lists unfortunately don't generate an ID, so we have to use the CSS class.

something like:

var subgrid = $("#<subgrid name>").find(".entity-grid.subgrid");

[jaja4114]

@OliverRodrigues  that works. Thank you as always for the help!

[OliverRodrigues]

👍👍👍

[jaja4114]

@OliverRodrigues 

Hi Oliver.

For interest, have you ever got this to work for a lot of records as you mentioned in your blogpost that it will become difficult when there are multiple pages on your subgrid.

Sorry for coming back to this topic, just wondering if you've ever had to address this problem?

Greetings

[fm_skeller]

@jaja4114 In this scenario I tend to add a new button, and in the click handler use the webapi to create a new record in the background - the success message from the webapi will have the guid of the new record and then open a modal form in edit mode.

webapi.safeAjax({
		type: "POST",
		url: "/_api/accounts",
		contentType: "application/json",
		data: JSON.stringify({
			"name": "Sample Account"
		}),
		success: function (res, status, xhr) {
			console.log("entityID: "+ xhr.getResponseHeader("entityid"))
		}
	});

This way you can open the model edit form with the new guid - and there is no longer a need to actively checking for new records.

[jaja4114]

@fm_skeller 

Okay would it be possible for you to maybe just help me with the code to create a new button.

I would really appreciate it if possible.

Thanks in advance

[fm_skeller]

if you add have a button like this to a webtemplate or to the page copy (you can move the button to the correct location with javascript if needed): 

<a class="custom-create-link" data-refid="{{<id of the parent record}}" data-formid="<id of the edit form>" href="#" title="<a nice description>">What this button does</a> 

you can add the following to $(document).ready - sorry for any typos:

var $grid = $("#YourSubgridID .entity-grid");
var $modal = $grid.children(".modal-form-edit");
//the modal closed -> reset the src of the iframe
$modal.off("hidden.bs.modal.entitygrid").on("hidden.bs.modal.entitygrid", function() {
	$modal.attr("aria-hidden", "true");
	var e = $(this).find("iframe");
	e.attr("src", "");
});
//refresh the subgrid if the user closes the modal
$modal.find("button.form-close").on("click", function(){
	$("#YourSubgridID .entity-grid.subgrid").trigger("refresh");
});
$(".custom-create-link").on("click", function(e){
	e.preventDefault();
	var $iframe = $modal.find("iframe");
	var page = $iframe.data("page");
	var $button = $(this);
	var entityformId = $button.data("formid");
	var url = getUrlWithRelatedReference($grid, page + "?entityformid=" + entityformId);
	$.blockUI({ message: '<h3>Een ogenblik geduld</h3>' });
	var data = {
		"<parent lookup schemaname>@odata.bind": "/<parent table plural name>("+ $button.data('refid') + ")", 
	};
	webapi.safeAjax({
		type: "POST",
		url: "/_api/<plural tablename>",
		contentType: "application/json",
		data: JSON.stringify(data),
	})
	.done(function(data, status, jqXhr){
		$.unblockUI()
		$iframe.attr("src", url + "&id=" +jqXhr.getResponseHeader("entityid"));
		$iframe.attr("title", "Create a new xxx record");
		$modal.find(".modal-title").html('<span class="fa fa-pencil-square-o" aria-hidden="true"></span> add a new xxx');
		$iframe.on("load", function() {
			$modal.find(".form-loading").hide();
			$modal.find("iframe").contents().find("#EntityFormControl").show()
		});
		
		$modal.find(".form-loading").show();
		$modal.find("iframe").contents().find("#EntityFormControl").hide();
		$modal.modal();		
	})
	.fail(function(jqXHRres,status,error){ 
		$.unblockUI();
		console.log( error);
	})
	.always(function(){} );  
});

[jaja4114]

@fm_skeller thank you very much. I am going to try this.