Reading form data input by user in a embedded form widget in Modal

Praveen28
Tera Contributor

‎03-04-2020 05:40 AM

Hello Experts  - 

I have a set-up where there is a form widget embedded into a modal. The modal is opened by invoking spModal.Open() and the form to be opened is passed as a table in the widgetInput property. 

Do you know how the data entered by the user in the embedded form widget can be retrieved into the data object in the client script and sent over to the  server script  as input thus enabling me to save as a new record using Glide Record insert ?

Note:  $scope.page.g_form.getValue() returns undefined and looking in the community forums, the g_form.getValue() appears to be supported only for catalog variables.

regular g_form.getValue() doesn't work either.

 

Client Script

function($scope, $rootScope, spUtil, spModal) {
/* widget controller */
var c = this;

c.FormOptions = {
table: 'tbl_name',
sys_id: '-1',
query: ' ',
disableForm: false};

spModal.open({
title: c.modalTitle,
widget: 'name of widget',
widgetInput: c.FormOptions,
size: 'lg',
buttons: [{label:'Submit New', hide: false, primary: true}]
}).then (function() {

c.buttonClicked();

}

c.buttonClicked = function(){

// hoping to retrieve the value as follows and save it to data object

c.data.field1 = $scope.page.g_form.getValue('field1');

}

 

Server script:

(function() {

if (input)

{

var gr = new GlideRecord('tbl_name');

gr.initialize();

gr.field1 = input.field1;

gr.insert();

}

}) ();

Any help/guidance is much appreciated!

0 Helpfuls
  • 1,636 Views
1 REPLY 1

Prasad Dhule
Tera Contributor

‎03-10-2020 03:56 AM

Hi Praveen,

The best way to do that would be to use 'modal' widget. You could open the any widget inside modal as an embedded widget. The modal opens the widget as it is and you could send the details across the widgets using 'emit' or 'broadcast' functions.

// Parent widget

// HTML
<sp-widget widget="c.widgetModal" ng-if="c.widgetModal"></sp-widget>

// Client script

$scope.server.get({
  action: 'open_widget'
}).then(function(response) {
  var modalCtrl;

  // This is the event where you will get the form details and perform the insert action
  var unregister = $scope.$on('form-submitted', function(data) {    
    $scope.server.get({
      action: 'insert_data',
      form_data : data
    }).then(function(response) {
      console.log("Record created");
    });
    modalCtrl.close();
  });


  var widgetModal = angular.copy(response.data.progressModal);
  widgetModal.options.afterOpen = function(ctrl) {
    modalCtrl = ctrl;
  };
  widgetModal.options.afterClose = function() {
    unregister();
    c.widgetModal = null;
    modalCtrl = null;
  };
  c.widgetModal = widgetModal;
});

// Server Script
if (input && input.action === 'open_widget') {
  data.progressModal = $sp.getWidget('widget-modal', {
    embeddedWidgetId: 'widget_name',
    embeddedWidgetOptions: {

    },
    backdrop: 'static', 
    keyboard: false, 
    size: 'lg'
  });
  return;
}
// Child widget

// Client script
$scope.$emit('form-submitted', c.formDetails);

Hope this Helps 🙂

0 Helpfuls