I have never tried pulling in React in Service Portal, but the following might work.

In the client controller define some variables on $scope or c.

api.controller = function($scope){
    var c = this;
    $scope.geoLoc = {
        "lat": "",
        "long": ""
    };
    
    //to test if this works watch the variables for changes and log out values
    $scope.$watch( 'geoLoc ', function (newValue, oldValue ) {
        if(newValue.lat || newValue.long)
            console.log(newValue)
    }, true)
...
}

 

Since your React script is outside AngularJS scope you'll need to grab it within the script tags in the HTML template. You'll also want to wrap within a setTimeout to ensure the elements are present before the script runs.

 

  <script>
    
    setTimeout(function(){
        var scope = angular.element('#Geo_Map_root').scope();
        let locTimer;
        const loadLocationMap = () => {
          const { LocationMap } = window.geoJsLib;
          const root = ReactDOM.createRoot(document.getElementById('Geo_Map_root'));
          const onSubmit=(location) => {
            scope.geoLoc.lat = location.latitude.toString();
            scope.geoLoc.long = location.longitude.toString();
          }
          root.render(React.createElement(LocationMap, { onSubmit }, null));
        }
    },500);
    
  </script>

 

I know that doing this works without using React, so theoretically it should work with it.

react_test.gif

View solution in original post