Angularjs Material SP Widget: inserting data into table dynamically

[yundlu316]

Hi Experts, our team is creating a widget in SP that incorporates AngularJS Material.   The widget pulls up a dialog box (modal window) that displays a form and when a user submits it, we would like the info they put into each input box to map to the table.   Our submit button has an ng-click:

<md-button ng-click="submit()" class="md-raised md-primary">
     Submit <i class="material-icons" style="vertical-align:middle;">send</i>
</md-button>

But we are unsure how to code the client script and server script so that the input values get mapped back to the table...

Here's our client script so far:

$scope.submit = function() {
$scope.server.get({
action: 'save_answer'
}).then(function(response) {
});
}

We also started our server script, but nothing works.   I'm pretty sure our syntax is incorrect somewhere, but am unsure...

if (input && input.action == 'save_answer') {
var answers = new GlideRecord('questionnaire_table');
answers.query();
answers.initialize();
answers.ref_user = data.user;
for(var i=0; i<sections.length; i++){
for(var j=0; j<section_elements.length; j++){
var key = sections[i].section_elements[j].section_element_name;
var answer = sections[i].section_elements[j].answer;
answers['' + key] = answer;
}
}
answers.insert(); 
}

We are trying to avoid mapping each input box explicitly back to the table, but instead want to loop through each element name by querying sys_dictionary and sys_ui_section tables and completing it that way.   Any suggestions on how to accomplish this efficiently?

Additionally, we have a couple business rules incorporated on the backend form that shows/hides certain fields based on other answers.   Is there an easy way to have those transfer over to the widget as well?

THanks!

[larstange · Accepted solution]

Hi

The elements/inputs in form you display to the user in the dialog, should be named so they match the names of the fields in the table you want to save the values to.

You then push all the input fields to the data object and send it to the server.

On the server you loop through all the object and map the values to the gliderecord

var answers = new GlideRecord('questionnaire_table'); 
answers.initialize(); 
for (var key in input.formInput) {
         answers.setValue(key,input.formInput[key]);     
}
answers.insert();

[yundlu316]

Thanks Lars!

I used an ng-model to bind the data to the $scope, and then used your advice above and it works great (my code is below).   I have a follow up question about updating a record though.   My code below works when submitting a brand new record, but what do I have to add in to update an existing record?

if (input && input.action == 'save_answer') {

var answers = new GlideRecord('questionnaire_table');

answers.query();

answers.initialize();

answers.setValue(answers.ref_user, gs.getUserID());

for(var i=0; i<input.quest_data.length; i++){

for(var j=0; j<input.quest_data[i].section_elements.length; j++){

var key = input.quest_data[i].section_elements[j].section_element_name;

var answer = input.quest_data[i].section_elements[j].answer;

answers['' + key] = answer;

}

}

answers.insert();

}

}

[patwheat]

Hey Lars I want to be able to make inputs that will be able to send data to the database.   Is their an article that I can follow?

[larstange]

Hi

This would be a good place to start: https://serviceportal.io/communicating-between-the-client-script-and-the-server-script-of-a-widget/