Skip to main content

With Experience Profiler

Integrating the ISOT Experience Profiler into your web application allows users to efficiently explore and rate skills. The following steps guide you through the integration process.

CheckOut Demo

Prerequisites​

Integration Steps​

1. HTML File Setup​

Download and edit the HTML file from the provided link index.html. Ensure that you customize it according to your application's requirements.

2. Configure Endpoint URL​

In the plugin.js file, locate the ENDPOINT_URL variable and set it to your desired endpoint:

const ENDPOINT_URL = "http://localhost:8000/dev-api/";

3. Expected Result​

After completing the setup, your application should display results similar to the provided example. Expected Result

4. Configuration for Rated Skills​

Configure the plugin to retrieve rated skills by including the following code in your Javascript:

const plugin = new IysFunctionalAreasPlugin({
  // ... other configurations
  ratedSkillEvent: ratedSkillEvent,
});

The response for rated skills will be in the following format:

{
    "comment": "sdsd",
    "rating": 2,
    "isot_file_id": "files/988243",
    "isot_file": {
        "_key": "988243",
        "_id": "files/988243",
        "name": "AWS CloudFormation Batch",
        "is_discrete": false,
        "description": null,
        "display_order": 0,
        "child_count": null,
        "rating_type": 1,
        "rating_legend": 56,
        "rating": {
            "_key": "56",
            "_id": "rating_options/56",
            "options": [
                "Aware",
                "Familiar",
                "Proficient",
                "Expert"
            ]
        },
        "tags": [
            "tags/36669670"
        ],
        "tags_data": [
            {
                "_key": "36669670",
                "_id": "tags/36669670",
                "title": "Tools and Technologies"
            }
        ]
    }
};

Ensure that you handle and display this response appropriately in your application.

By following these steps, you should have a seamless integration of the IysFunctionalAreasPlugin into your web application, allowing you to retrieve and display rated skills.4

5. Add Prefill Data to profiler​

function selectedSkill(params) {
  console.log("apidata", params);
}

const plugin = new IysFunctionalAreasPlugin({
  pluginDivId: "iys-functional-areas-plugin",
  onSearchSkillClick: selectedSkill,
  ratedSkillEvent: ratedSkillEvent,
  skillsData: previousData,
});
plugin.init();
function ratedSkillEvent(params) {
  console.log("ratedSkillEvent", params);
  console.log("seleced skill", plugin.ratedSelectedSkills);
}

add the skillsData parameter to plugin the format for data should like bellow

let previousData = [
  {
    comment: "comment",
    rating: [
      {
        isot_rating_id: "ratings/1",
        rating: 2,
        comment: "comment",
      },
      {
        isot_rating_id: "ratings/2",
        rating: 2,
        comment: "comment",
      },
    ],
    isot_file_id: "13074779",
    isot_file: {
      path_addr: "13074779",
      name: "AWS Consultant",
      description: null,
      ratings: [
        {
          _id: "ratings/1",
          rating_category: "Experience Recency",
          rating_scale_type: "Two Choice Rating",
          rating_scale_label: ["Current", "Past"],
        },
        {
          _id: "ratings/2",
          rating_category: "Experience Level",
          rating_scale_type: "Four Scale Rating",
          rating_scale_label: [
            "0 - 2 years",
            "2 - 5 years",
            "5 - 10 years",
            "10+ years",
          ],
        },
      ],
      tags: [
        {
          _id: "tags/12",
          title: "Role / Occupation",
        },
      ],
      display_order: null,
      child_count: 4,
    },
  },
];