How to communicate two different widgets in a page

How to communicate two different widgets in a page

Step 1: Create a widget and give the name as per your choice, and insert below code of your widget.

HTML PART :-

<div class="panel panel-default">
  <div class="panel-body">
  <div class="form-group">
    <label>Title</label>
    <input class="form-control" ng-model="c.data.name">
    </div>
    <div class="form-group">
   
      <lable>Description</lable>
      <input class="form-control" ng-model="c.data.sdec">
    </div>
    <div class="form-group">
   
      <input class="btn btn-primary btn-block" ng-click="c.addItem()" type="submit" value="Add">
    </div>
  </div>
</div>

SERVER SCRIPT:-

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
if(!input)
return;
var gr=new GlideRecord("<your tbl name>");
gr.initialize();
gr.variable_name=input.name;
gr.varaible_name=input.sdec;
gr.insert();
})();

CLIENT SCRIPT :-

function() {
  /* widget controller */
  var c = this;
c.addItem=function()
{
c.server.update().then(function(response){
c.data={};
})
  }
}

Step 2: Create the second widget and give the name as per your choice, insert the following code.

HTML PART :-

<div class="panel panel-default">
  <div class="panel-heading">
  TASK
  </div>
 <div class="list-group">
  <a class="list-group-item" ng-repeat="task in c.data.tasks">
   <input class="pull-left" type="checkbox">
    <div class="m-l-lg">
      <b class="text-primary">{{task.name}}</b><br>
  {{task.description}}
    </div>
   </a>
  </div>
  <div ng-if="c.data.tasks.length==0" class="b-t wrapper text-center">NO TASK</div>
</div>

SERVER SCRIPT:-

(function() {
 data.tasks=[];
var gr=new GlideRecord('<tbl_name>');
gr.query();
while(gr.next())
{
var task={};
task.name=gr.getDisplayValue('variable_name1');
task.description=gr.getDisplayValue('variable_name2');
task.sys_id=gr.getUniqueValue();
data.tasks.push(task);
}
})();

CLIENT SCRIPT:-

function($scope,spUtil) {
  /* widget controller */
  var c = this;
spUtil.recordWatch($scope,"<tbl name>","",function(name,data){
spUtil.update($scope);
});
}


Step 3:- Create a page and add both the widget inside the page.

Step 4 :-  Test