@abt-desk/apm

This library contains the APM application as a component which can be integrated in different realogy web systems which use Angular, React or HTML. APM itself consists of 5 different components which are About me, Contact Info, Office, Social Media and Photo.

Usage no npm install needed!

<script type="module">
  import abtDeskApm from 'https://cdn.skypack.dev/@abt-desk/apm';
</script>

README

Profile manager

This library contains the APM application as a component which can be integrated in different realogy web systems which use Angular, React or HTML. APM itself consists of 5 different components which are About me, Contact Info, Office, Social Media and Photo.

API Details

  • We are calling the MDM Agent API to fetch the details into the APM application where data will be loaded when the call is made.
  • RDM API is available to fetch the types and descriptions for each field.

Note

  • Extranet sites will not be interacting with the APIs. They are already taken care of in the APM package.
  • Possible Brand Codes – BHG, ERA, C21 and CBR.
  • Parent application must leverage okta authentication.

Installation

npm install @abt-desk/apm

Intergrating into a project

Angular

  • After installing, add the following configurations
  • Import the following into the main component file
import '@abt-desk/apm/abt-desk-apm';
  • Include the following in the main template file
<apm-agent-detail brand-code="C21" (apmMessage)="getMessage($event)" ></apm-agent-detail>
  • Include the following in the main styles file
@import '@abt-desk/apm /styles';
  • Include the following in the angular.json file
    {
        "input": "./node_modules/@abt-desk/apm /icons",
        "glob": "**/*",
        "output": "icons"
    },
    {
        "input": "./node_modules/@abt-desk/apm /tinymce",
        "glob": "**/*",
        "output": "tinymce"
    }

React

  • After installing, copy the contents from ‘@abt-desk/apm’ from node_modules to the Public folder
  • Add the following script and styles to the index.html
<script type="text/javaScript" src="./abt-desk-apm.js" defer></script>
<link rel="stylesheet" href="./styles.css">
  • Include the following in the main template file
<apm-agent-detail brand-code="C21"></apm-agent-detail>

HTML

  • After installing, add the following to the main html in body section.
<apm-agent-detail brand-code="C21"></apm-agent-detail>
<script src="scripts/abt-desk-apm.js"></script>
  • Include the following in the head section
<link rel="stylesheet" href="styles.css" />

Note to parent application

  • The okta session will be handled by the parent application.
  • In case of okta session expiry, we will be creating an interface to inform the application about the exception failures, and they will be responsible for the reauthentication. We can attempt to renew but it must be done by the parent application.
  • Header and footer will not be included as part of the APM package.

Exception handling

login_required

  • If the user is not logged into okta and tries to login to the application, then the application will send an error code as 'login_required' based on which the user is redirected back to the sign in page.

Sample code snippet:

Angular:

getMessage(res: string) {
  // Handle the message triggered
  if(res.detail.errorCode === "login_required") {
      this.oktaAuth.signOut ();
      this.router.navigateByUrl('/');
   }
}

ReactJs:

class App extends Component {
  constructor(props) {
    super(props);
    this.apmRef = React.createRef();
  }
  componentDidMount() {
    this.apmRef.current.addEventListener("apmMessage", ({detail}) =>
      // Handle the event triggered
      if(res.detail.errorCode === "login_required") {
          this.props.oktaAuth.signOut ();
          this.props.history.push('/login');
      }
    );
  }
  render() {
    return (
      <apm-agent-detail brand-code="C21" ref={this.apmRef}></apm-agent-detail>
    );
  }
}

HTML:

<body>
    <apm-agent-detail id="apm" brand-code="BHG"></apm-agent-detail>
    <script>
        var el = document.getElementById('apm');
        el.addEventListener("apmMessage", function(res){
        // Handle the event triggered
        if(res.detail.errorCode === "login_required")
          {
            oktaSignIn.signOut();
            window.location.href= "/login";
          }
      });
    </script>
</body>

access_denied:

  • If the user doesn’t have access to the NPM application. We will show the error saying, 'Sorry, but you don't have access to this application.' Parent must get access to the application to be able to login. In other case, if a C21 user is trying to login to CBR brand page, we can expect this scenario. Since this exception can’t be handled by the parent application, we will be showing an error message.

brand_code_required:

  • When including the package, we need to pass the attribute “brand-code” and pass a valid brand code. Possible brand codes are given below.
  • Brand Codes – BHG, ERA, C21 and CBR.

Sample code snippet:

<apm-agent-detail id="apm" brand-code="BHG"></apm-agent-detail>

generic_error:

  • When API’s are down, or server is down, the parent application won’t be able to do anything but wait. Since this exception can’t be handled by the parent application, we will be showing an error message.