Idea Portal Widget Create/Edit

litchick10
Tera Guru

We want to use the Idea portal and have configured it to work, however, we have additional fields that we want on the Create/Edit widget that match the form for the table.  I cannot find documentation on the widget tags. I am brand new to developing in the portal/widgets but have some experience in native SNOW

For example:

I added a field Epic Hypothesis but cannot figure out how to send the data back to the Idea. This field exists in the table as u_epic. Additionally, I can't figure out how to populate it with the default value for Epic Hypothesis. 

find_real_file.png

find_real_file.png

I added the following to the HTML

 <label for="epic" class="field-label" title="{{::data.formModel._fields.u_epic.label}}" aria-label="{{::data.formModel._fields.u_epic.label}} "
                                tooltip-right="true">
              
                                {{::data.formModel._fields.u_epic.label}}
                            </label>
                            <cf-tiny-mce
                                         ng-class="(formSubmitted && !data.formModel._fields.u_epic.stagedValue) ? 'field-invalid' : ''"
                                         data-ng-model="data.formModel._fields.u_epic.stagedValue"
                                         ng-model-options="{height: '300', allow: false}"
                                         table="{{data.formModel.table}}"
                                         attachment-sys-id="-1"
                                         max-file-size="{{data._maxAttachmentSize}}">
                              <p>test data</p>
                           </cf-tiny-mce>

The following for Server Script

			'u_epic': gs.getMessage('Epic Hypothesis')

The following to Client Script under 

    $scope.data.formModel = {
        _fields: {
	//Existing formModel info was here added this below
	  u_epic: {
                label: $scope.data.messages.formLabels.u_epic,
                name: $scope.data.messages.formLabels.u_epic,
                stagedValue: ($scope.data.ideaInfo && $scope.data.ideaInfo.u_epic) || '',
                value: '<p>Test</p>',
                displayValue: 'Test',
                type: 'html'
                 },

The value/default value do not display on the form in the portal and nothing transmits on submit.  What am I missing

 

Example 2:

How do I create a field with a tree picker like our benefiting line of business field

 find_real_file.png

 Any help you can provide would be greatly appreciated

 

 

1 ACCEPTED SOLUTION

litchick10
Tera Guru

Credit to @CB  & @satyach posting full solution to make it easier for the next person who is lost as I was

A) Create a HTML field in the idea table - u_epic

B) Client controller

1. In $scope.data.formModel object, added entry:
u_epic: {
label: $scope.data.messages.formLabels.u_epic,
name: $scope.data.messages.formLabels.u_epic,
stagedValue: ($scope.data.ideaInfo && $scope.data.ideaInfo.u_epic) || '',
value: '',
displayValue: '',
type: 'html',
mandatory: true,
mandatory_filled: function () {
return !!($scope.data.formModel._fields.u_epic.stagedValue);
},
isMandatory: function () {
return true;
}
}

2. In the _getRequestParams function
added the line: requestParams.sysparm_u_epic = formFields.u_epic.stagedValue;


C) In the Server Script

1. For the object: data.messages.formLabels, added below line:
'u_epic': gs.getMessage('Epic')

D) In the HTML section added below in the <form> tag similar to description

<label for="u_epic" class="field-label" title="{{::data.formModel._fields.u_epic.label}}" aria-label="{{::data.formModel._fields.u_epic.label}} "
tooltip-right="true">
<span class="field-decorations">
<span ng-show="::data.formModel._fields.u_epic.mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': data.formModel._fields.u_epic.mandatory_filled()}"
title="${Required}" style="padding-right: .25em" aria-label="{{data.formModel._fields.u_epic.mandatory_filled()? '${Required Filled}' : '${Required}'}}"></span>
</span>
{{::data.formModel._fields.u_epic.label}}
</label>
<cf-tiny-mce
ng-class="(formSubmitted && !data.formModel._fields.u_epic.stagedValue) ? 'field-invalid' : ''"
data-ng-model="data.formModel._fields.u_epic.stagedValue"
ng-model-options="{height: '300', allow: false}"
table="{{data.formModel.table}}"
attachment-sys-id="-1"
max-file-size="{{data._maxAttachmentSize}}">
</cf-tiny-mce>

E) Navigate to scripted rest api: Idea Management Portal
In the Resources related list: open the resource - Idea CUD Operations
In the script field:
For the if condition: if(operation == 'create')
added line - ideaInfo.u_epic = requestData.sysparm_u_epic; below this line: ideaInfo.description = requestData.sysparm_description;

F) Navigate to script include: IMCreateEditIdeaDataService
 Replace with:

var IMCreateEditIdeaDataService = Class.create();

IMCreateEditIdeaDataService.prototype = Object.extendsObject(IMCreateEditIdeaDataServiceSNC, {
 

createIdea: function(ideaInfo) {
 //gs.log('ideaInfo: ' + JSON.stringify(ideaInfo), 'IdeaPortal');
 var newIdeaSysId;
 var ideaGr = new GlideRecord(this.ideaTableName);
 ideaGr.initialize();
 ideaGr.setNewGuidValue(ideaInfo.sysId); //Setting sys_id here so that to fetch related attachments
 ideaGr.module = ideaInfo.module;
 ideaGr.short_description = ideaInfo.title;
 ideaGr.idea_description = ideaInfo.description;
 ideaGr.u_epic = ideaInfo.u_epic;
 if(ideaGr.canCreate()) {
 newIdeaSysId = ideaGr.insert();
 //this.updateIdeaReferencesWithCategories(ideaInfo.categoryInfo,newIdeaSysId);
 this.createM2MReferencesForIdeaAndCategories(ideaInfo.categoryInfo,newIdeaSysId);
 this.updateEditorAttachments(ideaInfo.editorImages, newIdeaSysId);
 }

return {
 'sys_id': newIdeaSysId
 };

View solution in original post

17 REPLIES 17

Satyanarayana C
ServiceNow Employee
ServiceNow Employee

Hi,

For your second question, navigate to the dictionary for your field and add an attribute as shown below.

find_real_file.png

Thanks

Sorry was unclear about what I'm asking for. I know how to add onto table/form in Native Snow, I'm trying to figure out how to add this type of field in the portal.

For example the cf-tiny-mce tag makes an HTML of field, what tag(s) makes a tree picker list field?

Hi Litchick10,

The tree picker is not possible as how it works in native but you can give a try by following the steps mentions in the below threads:

Tree Picker in portal

Tree

 

The solution is not complete you can give a try.

Please mark my response correct and helpful.

 

Thanks,

CB

Satyanarayana C
ServiceNow Employee
ServiceNow Employee

Hi,

For your first question, i followed below steps and i was able to insert data into idea table with epic field also.

A) Create a HTML field in the idea table - u_epic

B) Client controller

1. In $scope.data.formModel object, added entry:
u_epic: {
label: $scope.data.messages.formLabels.u_epic,
name: $scope.data.messages.formLabels.u_epic,
stagedValue: ($scope.data.ideaInfo && $scope.data.ideaInfo.u_epic) || '',
value: '',
displayValue: '',
type: 'html',
mandatory: true,
mandatory_filled: function () {
return !!($scope.data.formModel._fields.u_epic.stagedValue);
},
isMandatory: function () {
return true;
}
}

2. In the _getRequestParams function
added the line: requestParams.sysparm_u_epic = formFields.u_epic.stagedValue;


C) In the Server Script

1. For the object: data.messages.formLabels, added below line:
'u_epic': gs.getMessage('Epic')

D) In the HTML section added below in the <form> tag similar to description

<label for="u_epic" class="field-label" title="{{::data.formModel._fields.u_epic.label}}" aria-label="{{::data.formModel._fields.u_epic.label}} "
tooltip-right="true">
<span class="field-decorations">
<span ng-show="::data.formModel._fields.u_epic.mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': data.formModel._fields.u_epic.mandatory_filled()}"
title="${Required}" style="padding-right: .25em" aria-label="{{data.formModel._fields.u_epic.mandatory_filled()? '${Required Filled}' : '${Required}'}}"></span>
</span>
{{::data.formModel._fields.u_epic.label}}
</label>
<cf-tiny-mce
ng-class="(formSubmitted && !data.formModel._fields.u_epic.stagedValue) ? 'field-invalid' : ''"
data-ng-model="data.formModel._fields.u_epic.stagedValue"
ng-model-options="{height: '300', allow: false}"
table="{{data.formModel.table}}"
attachment-sys-id="-1"
max-file-size="{{data._maxAttachmentSize}}">
</cf-tiny-mce>

E) Navigate to scripted rest api: Idea Management Portal
In the Resources related list: open the resource - Idea CUD Operations
In the script field:
For the if condition: if(operation == 'create')
added line - ideaInfo.u_epic = requestData.sysparm_u_epic; below this line: ideaInfo.description = requestData.sysparm_description;

F) Navigate to script include: IMCreateEditIdeaDataService
Add below method:
createIdea: function(ideaInfo) {
//gs.log('ideaInfo: ' + JSON.stringify(ideaInfo), 'IdeaPortal');
var newIdeaSysId;
var ideaGr = new GlideRecord(this.ideaTableName);
ideaGr.initialize();
ideaGr.setNewGuidValue(ideaInfo.sysId); //Setting sys_id here so that to fetch related attachments
ideaGr.module = ideaInfo.module;
ideaGr.short_description = ideaInfo.title;
ideaGr.idea_description = ideaInfo.description;
ideaGr.u_epic = ideaInfo.u_epic;
if(ideaGr.canCreate()) {
newIdeaSysId = ideaGr.insert();
//this.updateIdeaReferencesWithCategories(ideaInfo.categoryInfo,newIdeaSysId);
this.createM2MReferencesForIdeaAndCategories(ideaInfo.categoryInfo,newIdeaSysId);
this.updateEditorAttachments(ideaInfo.editorImages, newIdeaSysId);
}
return {
'sys_id': newIdeaSysId
};
},

This method comes from the script include: IMCreateEditIdeaDataServiceSNC
We are overriding this so that we can add the epic field.

 

 Thanks