Calling one widget into another widget

[Pushpanjali3]

We have two widgets : eGatePassSubmit and eGatePassAddItem. I'm trying to implement functionality where selecting radio button 'Save as Draft' in the eGatePassSubmit widget should make the fields : st-code, item-description, quantity in the eGatePassAddItem widget non-mandatory, and selecting radio button 'Ready for Submission' should make them mandatory.

I'm using AngularJS's two-way data binding but unable to achieve it. Please can anyone help on this?

eGatePassSubmit

HTML:

<div class="egate-submit-wrapper">
<p class='description'>Decide whether you want to send to the request by saving it as a draft for later editing,
or whether you want to send it as ready for approval.<br>
Remember, in any case you can view them under <strong>My Requests </strong>
</p>

<div class="card-wrapper">
<div class="card-item">
<div class='radio'>
<label>
<input type="radio" name="submitOption" id="submitOption1" value="option1" ng-model="data.submitOption">
Save as draft
</label>
</div>
</div>

<div class="card-item">
<div class='radio'>
<label>
<input type="radio" name="submitOption" id="submitOption2" value="option2" ng-model="data.submitOption">
Ready for submission
</label>
</div>
</div>
</div>
</div>

Client script:
function($scope) {
 var c = this;

// Watch for changes in the submit option
 $scope.$watch('data.submitOption', function(newVal) {
// Broadcast the selected option to other widgets
$scope.$broadcast('submitOptionChanged', newVal);
});
}

eGatePassAddItem
HTML:

<div class='form-group'>
<label for='st-code'>ST Code <span class="fa fa-asterisk mandatory ng-scope" aria-label="Required" role="img" aria-hidden="true"></span></label>
<input type="text" class="form-control" id="st-code" ng-required="c.isMandatory">
</div>

<div class='form-group'>
<label for='item-description'>Item Description <span class="fa fa-asterisk mandatory ng-scope" aria-label="Required" role="img" aria-hidden="true"></span></label>
<input type='text' class="form-control" id='item-description' placeholder='Enter description' ng-required="c.isMandatory">
</div>

<div class='form-group'>
<label for='quantity'>Quantity <span class="fa fa-asterisk mandatory ng-scope" aria-label="Required" role="img" aria-hidden="true"></span></label>
<input type='text' class="form-control" id='quantity' placeholder='Enter quantity' oninput="CalculateTotalValue()" ng-required="c.isMandatory">
</div>

Client Script:
function($scope, $rootScope) {
var c = this;

// Watch for changes in the submit option from eGatePassSubmit widget
$scope.$on('submitOptionChanged', function(event, newVal) {
// Set fields as mandatory or non-mandatory based on the selected option
if (newVal === 'option1') {
// Make fields non-mandatory
c.isMandatory = false;
} else if (newVal === 'option2') {
// Make fields mandatory
c.isMandatory = true;
}
});
}

[johansec]

You have two main ways to communicate between widgets. 

1. The data your binding too can be stored in rootscope. This will make the data accessible between both of the widgets as long as you include $rootscope in both of the client scripts. 
2. You can fire events and have listeners. So when whatever happens you can do an ng-click and call a function if it meets the criteria then you would broadcast an event and pass a data object. The listener would receive that data and can do what it needs to in its scope. . Here is an article on this https://www.servicenow.com/community/developer-articles/how-to-comunicate-between-widgets-service-po...

[johansec]

Im at knowledge right now but this may give you a quick start. I can look later and help out a bit more if needed.

[Pushpanjali3]

Awaiting for your help