Service Portal : Need to pass the value from one widget to another widget

[raja_5]

Hi Experts,

I have a value in main widget which needs to be passed to another widget when I'm clicking on a button 

HTML : 

<button type="button" data-toggle="modal" data-target="#mydeletionModal" class="button-custom-2 btn-danger" ng-click="c.getAccountDetails(accNm)"><i class="fa-solid fa-trash"></i> Delete Selection</button>

below is the function in main widget 

Client controller : 

$scope.getAccountDetails = function(accNm) {

        $scope.showTab1Info = true;

        c.server.get({

            accountNm: accNm

        }).then(function(r) {

            //console.log("account details:" + r.data.accountDetails);

            $scope.accountDetails = r.data.accountDetails;

            alert('print accNm'+accNm);            [ accNm is the value]

        });

    };

[Ratnakar7]

Hi @raja_5 ,

You can use events (brodcast/emit/on) [refer Using Events to Communicate Between Widgets ]

Here are the high-level steps to achieve this:

1. In the main widget, trigger an event when the button is clicked, and pass the value as a parameter to the event.

Here's some sample code that demonstrates how to trigger the event:

$scope.getAccountDetails = function(accNm) {
  // ...
  // Trigger the event when the button is clicked
  $rootScope.$broadcast('myEventName', accNm);
};

In this code, we trigger the "myEventName" event and pass the "accNm" value as a parameter

   2. In the second widget, listen for the event and retrieve the value from the event parameters.

Here's some sample code that demonstrates how to listen for the event:

$scope.$on('myEventName', function(event, accNm) {
  // ...
  // Do something with the "accNm" value
  alert('print accNm' + accNm);
});

In this code, we listen for the "myEventName" event and retrieve the "accNm" value from the event parameters.

To implement this in your code, you can modify the "getAccountDetails" function in the main widget as follows:

$scope.getAccountDetails = function(accNm) {
  // ...
  // Trigger the event when the button is clicked
  $rootScope.$broadcast('myEventName', accNm);
};

And in the second widget, you can add the following code to listen for the event:

$scope.$on('myEventName', function(event, accNm) {
  // ...
  // Do something with the "accNm" value
  alert('print accNm' + accNm);
});

Note that you may need to adjust the event name and the parameter name to fit your specific use case.

If my response helps you to resolve the issue close the question by ✅Accepting solution and hit 👍thumb icon. From Correct answers others will get benefited in future.

Thanks,

Ratnakar

[raja_5]

Hi @Ratnakar7 Thank you for you response 

Tried as below but no luck

Main widget :

html:

<button type="button" data-toggle="modal" data-target="#mydeletionModal" class="button-custom-2 btn-danger" ng-click="c.getAccountDetails(accNm)"><i class="fa-solid fa-trash"></i> Delete Selection</button>

Client script :

 $scope.getAccountDetails = function(accNm) {

        $scope.showTab1Info = true;

        c.server.get({

            accountNm: accNm

        }).then(function(r) {

            $rootScope.$broadcast('getaccount',accNm);

            //console.log("account details:" + r.data.accountDetails);

            $scope.accountDetails = r.data.accountDetails;

            //alert('print accNm'+accNm);

        });

    };

second widget :

HTML:

<label for="account-name">Account Name</label>
<input type="text" value="{{showaccount.accNm}}">

client script:

 $scope.showaccount = "";

$rootScope.$on('getaccount', function(event, accNm) {

  $scope.showaccount=accNm;

});

[raja_5]

Hi @Ratnakar7 ,

I tried broadcast method ,i am able to get the value on another widget but only in alert.

When i'm trying to push the value in another variable its still blank.

$rootScope.$on("xyz",function(event,data){
        c.data.name=data;
            alert("data"+ data); // (This alert gives me the expected value however c.data.name is blank)

Please suggest

[Ratnakar7 · Accepted solution]

Hi @raja_5 ,

it seems like there may be some issues with how you're trying to display the value in the second widget.

Here's how you can modify your code to pass the value from the main widget to the second widget:

In the main widget:

// client script
$scope.getAccountDetails = function(accNm) {
  c.server.get({
    accountNm: accNm
  }).then(function(r) {
    $rootScope.$broadcast('getaccount', accNm);
    $scope.accountDetails = r.data.accountDetails;
  });
};

In the second widget:

// client script
$scope.showaccount = {};
$scope.$on('getaccount', function(event, accNm) {
  $scope.showaccount.accNm = accNm;
});

In the second widget's HTML, you can display the value like this:

<label for="account-name">Account Name</label>
<input type="text" ng-value="showaccount.accNm">

Thanks,

Ratnakar