Widget - Requêter et restituer les offres d’emploi

Présentation

Ce widget permet de bénéficier d’une interface préconstruite pour requêter et afficher sur une carte les offres d'emploi issues de l’API Offres d’emploi.

Le widget s'appuie sur StencilJS qui utilise la technologie Web Component.

Il s'agit d'une première version du widget, des évolutions sont possibles. N'hésitez pas à nous faire part de vos retours.

 

Pré-requis

Le widget est couplé à l’API Offres d’emploi. Il est donc nécessaire de remplir les conditions suivantes :

  1. Se créer un compte sur l’Emploi Store Développeurs
  2. Demander l'accès à l’API Offres d’emploi
  3. Être en mesure de faire des appels sur l’API Offres d’emploi :

 

Récupération du widget

Le widget est disponible à l’url suivante : https://www.emploi-store-dev.fr/widget/pe-offres-emploi/pe-offres-emploi.js

Afin d'intégrer le widget dans votre application, vous devez mettre un lien vers cette librairie.

 

Exemple 1

Intégration du widget sur une application html classique :

<!DOCTYPE html>
<html lang="fr">
<head>
 <script src="https://www.emploi-store-dev.fr/widget/pe-offres-emploi/pe-offres-emploi.js"></script>
</head>
<body>
 <pe-offres-emploi></pe-offres-emploi>
 <script>
     var macarte = document.querySelector('pe-offres-emploi');
     macarte.options = {};
     macarte.token = "mon token widget offre";
 </script>
</body>
</html>

 

Exemple 2

Intégration du widget sur une application Angular :

<!DOCTYPE html>
<html lang="fr">
<head>
 <script src="https://www.emploi-store-dev.fr/widget/pe-offres-emploi/pe-offres-emploi.js"></script>
</head>
<body>
 <pe-offres-emploi [options]="options" [token]="token"></pe-offres-emploi> </body>
</html>

 

Paramétrage du widget

Affichage par défaut

Une version par défaut propose une recherche d'offres d'emploi avec les champs suivants :

  • Mots clés
  • Commune
  • Type de contrat
  • Tri
  • Temps de travail

Le fonctionnement de ces critères de recherche est disponible sur la documentation de l'API Offres d'emploi.

Lorsque vous utilisez le widget sans paramétrage spécifique, voici une illustration de son affichage :

widget_offres.PNG

 

Paramétrage du widget

Tous les paramètres d'entrée de la ressource Rechercher par critères de l'API sont utilisables pour paramétrer le widget.

Ce dernier possède également les paramètres :

  • "rechercheAuto" qui permet d'indiquer si la recherche doit se faire automatiquement dès le chargement du widget.
  • "zoomInitial" qui permet d'ajuster le zoom au chargement de la carte.
  • "positionInitiale" qui permet d'ajuster la position au chargement de la carte (longitude, latitude)

Pour modifier son comportement par défaut, il est nécessaire de surcharger les champs de recherche proposés dans la version par défaut. Ensuite vous pouvez choisir d'afficher les champs que vous souhaitez en vous référent à la documentation de l'API Offres d'emploi v2.

Voici la configuration paramétrée dans la version par défaut du widget :

macarte.options = {
  rechercheAuto: false,
  zoomInitial: 5,
  positionInitiale: [2.09, 46.505],
  technicalParameters: {
    range: { value: '0-49', show: false, order: 1},
    sort: { value: 1, show: true, order: 3}
  },
  criterias: {
    domaine: { value: null, show: false, order: 1},
    codeROME: { value: null, show: false, order: 1},
    appellation: { value: null, show: false, order: 1},
    theme: { value: null, show: false, order: 1},
    secteurActivite: { value: null, show: false, order: 1},
    experience: { value: null, show: false, order: 1},
    typeContrat: { value: null, show: true, order: 2},
    natureContrat: { value: null, show: false, order: 1},
    qualification: { value: null, show: false, order: 1},
    tempsPlein: { value: null, show: true, order: 4},
    commune: { value: null, show: true, order: 1},
    distance: { value: null, show: false, order: 1, min: 0, max: 100},
    departement: { value: null, show: false, order: 1},
    inclureLimitrophes: { value: null, show: false, order: 1},
    region: { value: null, show: false, order: 1},
    paysContinent: { value: null, show: false, order: 1},
    niveauFormation: { value: null, show: false, order: 1},
    permis: { value: null, show: false, order: 1},
    motsCles: { value: null, show: true, order: 0},
    salaireMin: { value: null, show: false, order: 1, min: 0, max: 100},
    periodeSalaire: { value: null, show: false, order: 1},
    accesTravailleurHandicape: { value: null, show: false, order: 1},
    publieeDepuis: { value: null, show: false, order: 1},
    offresMRS: { value: null, show: false, order: 1},
    grandDomaine: { value: null, show: false, order: 1},
    experienceExigence: { value: null, show: false, order: 1}
  }
};

 

Pour chacun des paramètres (sauf "rechercheAuto"), il faut renseigner les 3 champs ci-dessous. S'ils ne sont pas renseignés, c'est la valeur de la configuration par défaut qui sera appliquée.

Champ Cardinalité Format Description
value 1 String

Valeur par défaut paramétrée dans le champ

Valeurs possibles :

  • null → Pas de valeur par défaut
  • Valeur autorisé par le paramètre dans la ressource Rechercher par critères de l'API
show 1 Booléen

Affichage du champ recherche

Valeurs possibles :

  • true → le champ est affiché
  • false → la champ n'est pas affiché
order 1 Integer

Ordre d'affichage des champs (commençant à 0)

 

Exemples de paramétrage

1. Paramètre "range"

 range: { value: '0-49', show: false, order: 1}
  • value: '0-49' → nous affichons uniquement 50 offres par recherche
  • show: false → ce paramètre est masqué pour les utilisateurs de votre application
  • order: 1 → l'ordre n'a pas d'importance dans ce cas puisque le champ est masqué

 

2. Paramètre "typeContrat"

typeContrat: { value: null, show: true, order: 2}
  • value: null → aucune valeur n'est mise par défaut
  • show: true → les utilisateurs de votre application peuvent filtrer par type de contrat
  • order: 2 → le champ de saisi du type de contrat est affiché en seconde position 

 

Questions à se poser pour le paramétrage du widget en fonction des cas d'usages

Mon paramètre est affiché ? Mon paramètre a une valeur par défaut ? Interprétation
non

oui

Lors de l'appel à l'API, la valeur du paramètre est toujours la même et n'est pas modifiable pour les utilisateurs de votre application

Exemple de cas d'usages :

  • Je souhaite proposer une recherche d'offre sur un département en particulier. Je vais donc renseigner la valeur du paramètre "departement" avec celle de mon département et ne laisserait pas la possibilité de la modifier par mon utilisateur.  departement: { value: [mon département], show: false, order: 1}

Ce traitement est possible pour chaque paramètre d'entrée de l'API.

non

non

Lors de l'appel à l'API, la valeur du paramètre est toujours valorisée à "null". Ce traitement correspond aux paramètres d'entrées de l'API Offres d'emploi qui ne sont pas pertinents pour votre cas d'usage.

oui

oui

Lors de l'appel à l'API, une valeur est positionnée par défaut dans le champ du widget qui correspond au paramètre d'entrée de l'API. La valeur de ce paramètre est modifiable par les utilisateurs de votre application.

oui

non

Lors de l'appel à l'API, aucune valeur n'est positionnée par défaut dans le champ du widget qui correspond au paramètre d'entrée de l'API. La valeur de ce paramètre est modifiable par les utilisateurs de votre application.

 

Exemples de cas d'usages

Description du cas d'usage Paramétrage du widget

En tant que maire d'une commune je souhaite afficher les offres d'emploi de ma commune et de ses alentours. 

Ma commune est petite et je souhaite que toutes les offres soient toujours affichées. 

Il y a un bon dynamisme avec la communes voisines à 30 km, je souhaite donc que les offres de la commune voisine soient aussi affichées.

motsCles: { value: null, show: false, order: 0},

commune: { value: "le code INSEE de ma commune", show: false, order: 0},

distance: { value: 30, show: false, order: 0},

 

Exemple complet d'intégration en HTML

<!DOCTYPE html>
<html lang="fr">
<head>
 <script src="https://www.emploi-store-dev.fr/widget/pe-offres-emploi/pe-offres-emploi.js"></script>
</head>
<body>
 <pe-offres-emploi></pe-offres-emploi>
 <script >
     var macarte = document.querySelector('pe-offres-emploi');
     macarte.options = {
          rechercheAuto: false,
          zoomInitial: 5,
          positionInitiale: [2.09, 46.505],
          technicalParameters: {
            range: { value: '0-49', show: false, order: 1},
            sort: { value: 1, show: true, order: 3}
          },
          criterias: {
            domaine: { value: null, show: false, order: 1},
            codeROME: { value: null, show: false, order: 1},
            appellation: { value: null, show: false, order: 1},
            theme: { value: null, show: false, order: 1},
            secteurActivite: { value: null, show: false, order: 1},
            experience: { value: null, show: false, order: 1},
            typeContrat: { value: null, show: true, order: 2},
            natureContrat: { value: null, show: false, order: 1},
            qualification: { value: null, show: false, order: 1},
            tempsPlein: { value: null, show: true, order: 4},
            commune: { value: null, show: true, order: 1},
            distance: { value: null, show: false, order: 1, min: 0, max: 100},
            departement: { value: null, show: false, order: 1},
            inclureLimitrophes: { value: null, show: false, order: 1},
            region: { value: null, show: false, order: 1},
            paysContinent: { value: null, show: false, order: 1},
            niveauFormation: { value: null, show: false, order: 1},
            permis: { value: null, show: false, order: 1},
            motsCles: { value: null, show: true, order: 0},
            salaireMin: { value: null, show: false, order: 1, min: 0, max: 100},
            periodeSalaire: { value: null, show: false, order: 1},
            accesTravailleurHandicape: { value: null, show: false, order: 1},
            publieeDepuis: { value: null, show: false, order: 1},
           offresMRS: { value: null, show: false, order: 1},
           grandDomaine: { value: null, show: false, order: 1},
           experienceExigence: { value: null, show: false, order: 1}
          }
        };
     macarte.token = "mon token widget offre";
 </script>
</body>
</html>