How to create a custom modal button which will trigger the Save button on an embedded Form widget

JC S_
Mega Guru

‎03-27-2018 06:20 AM

We embedded the Widget Form on a modal on service portal. Our goal is to create a custom "Submit" button so that when clicked, it will save the changes made on the form and then close the modal. Of course we need to hide that original save button so only our custom buttons will show.

How can we call the "Save (Ctrl + s)" button's function and do it via our custom "Submit" button instead?

find_real_file.png

Preview file
8 KB
Preview file
9 KB
0 Helpfuls
  • 3,759 Views
7 REPLIES 7

dpalmer
Kilo Guru

‎03-27-2018 07:51 AM

Hello JC,

You can try hiding the save button using a css declaration like display:none, and then using jquery to trigger the save button click when clicking your own custom button. Try pasting in the below code into a widget and see if this helps point you in the right direction.

<style>
    #hiddenButton {
        display: none;
    }
</style>

<body>
    <button id="hiddenButton" onclick="doSomething()">Im hidden</button>
    <button id="clickme">Click me</button>
    <script>
        $("#clickme").click(function() {
            $("#hiddenButton").trigger("click");
        });

        var doSomething = function() {
            alert("hello there");
        }
    </script>
</body>
0 Helpfuls

JC S_
Mega Guru
In response to dpalmer

‎03-27-2018 08:31 AM

Tried this and it didn't work. Perhaps it has something to do with the fact that the button we are trying to trigger is loaded from another widget. As I have mentioned, I embedded the Form Widget on a modal (which is a separate widget on itself).

 

I embedded the Form widget using:

<sp-widget widget="data.editform"></sp-widget>
0 Helpfuls

dpalmer
Kilo Guru
In response to JC S_

‎03-27-2018 09:01 AM

Hello JC,

I built a widget with a button, and then embedded the widget in another widget and could trigger its function. Would it be possible for you to post your current client/server/link scripts. And also, when you right click and inspect the embedded widgets save button, are you referencing that id when you are attempting to trigger that button?

find_real_file.png

This is the widget button I embedded below:

find_real_file.png

Preview file
207 KB
Preview file
159 KB
Preview file
230 KB
0 Helpfuls

JC S_
Mega Guru
In response to dpalmer

‎03-27-2018 10:29 AM

Tried to update my widget to how you set it up but I still can't make it work.

WIDGET 1

HTML

<div class="panel panel-default"> 
    <sp-widget widget="data.editform"></sp-widget>

    <div class="panel-footer text-right">
    <button class="btn btn-primary xx">${Submit}</button>
    </div>
</div>

Client

function($uibModal, $scope, spUtil, spModal) {
	var c = this;
			
	//Trigger Save on Embdedded Widget Form
	spUtil.get("widget2").then(function(response){
		data.editform = response;
	});

}

Server

(function() {
 
	// Get table & sys_id
	data.table = input.table || $sp.getParameter("table");
	data.sys_id = input.sys_id || $sp.getParameter("sys_id");
 
	// Valid GlideRecord
	gr = new GlideRecord(data.table);
	if (!gr.isValid()) return;

	// Valid sys_id
	if (!gr.get(data.sys_id)) return;
	
	//Embed widget
	var WidgetParams = { table: data.table, sys_id: data.sysid, view: 'sp'};
				data.editform = $sp.getWidget('widget2', WidgetParams);
	
})();

Link

function(scope, element){
	$(".xx").click(function(){
		$("#hiddenButton").trigger("click");
	});
}

 

Widget 2 (Clone of OOB widget-form)

HTML (Just added the id=hiddenButton part, but I retained all the other OOB HTML code)

<div class="panel-footer" id="hidden">
      <button id="hiddenButton" ng-if="getPrimaryAction()" type="submit" ng-mousedown="triggerUIAction(getPrimaryAction())" class="btn btn-primary action-btn pull-right">${Save}</button>
</div>

Client, Server, Link

- No changes made

 

0 Helpfuls