Chorus Pro | Cirrus Shield Help

Ce guide vise à vous guider à travers le processus d’intégration efficace de Chorus Pro avec Cirrus Shield.

Prérequis

Avant de pouvoir commencer à utiliser le service, vous devrez suivre les étapes suivantes :

Dans Chorus Pro :

Créer un compte Chorus Pro Créez un compte Chorus Pro en vous connectant au portail Chorus Pro, voici le lien : https://portail.chorus-pro.gouv.fr/aife_csm?id=aife_index
Créer un compte technique Chorus Pro Après avoir configuré avec succès votre compte Chorus Pro, il est essentiel de créer un compte technique si vous ne l’avez pas déjà fait. Ce compte technique sera utilisé pour effectuer des appels API sur l’API Chorus Pro afin de profiter de ses fonctionnalités. Suivez ces étapes pour créer le compte technique :

a. Accédez à l’onglet Accueil et sélectionnez la case “Connexions”. Cliquez sur le bouton “Service d’accès au compte technique”.

b. Dans ce service, vous pouvez effectuer différentes demandes. Pour créer un compte technique, cliquez sur le menu déroulant et choisissez “Création d’un compte technique”. Ensuite, allez dans le menu déroulant Structures et sélectionnez la structure pour laquelle vous souhaitez créer un compte technique.

c. Récupérez les identifiants “Identifiant” et “Mot de passe” fournis. Enregistrez ces informations localement pour une utilisation ultérieure. Ensuite, cliquez sur le bouton “Soumettre”.

Après la création réussie du compte technique, veuillez prévoir 20 à 30 minutes pour qu’il soit prêt à être utilisé.

3. Créer un compte Piste
Créez un compte Piste en vous connectant au site web de Piste, voici le lien : https://developer.aife.economie.gouv.fr/component/users/login Lorsque la création du compte est réussie, vous pourrez voir une application sandbox être automatiquement créée pour des cas de test en accédant à l’onglet “Applications”.

4. Créer une application de production sur Piste
Créez une application sur Piste afin qu’elle soit liée à Chorus Pro et que nous puissions utiliser les fonctionnalités de Chorus Pro. Voici les étapes à suivre : a. Accédez à l’onglet “Applications”

b. Cliquez sur le bouton “Créer une application”

c. Entrez les informations nécessaires, puis cliquez sur le bouton “Enregistrer l’application”

d. Sélectionnez les API suivantes afin de pouvoir les utiliser : “Factures”, “Structures” et “Transverses”, puis cliquez sur le bouton “Appliquer les modifications”. Cette page est accessible directement après la création de l’application.

Connexion Piste – Chorus Pro
Tout d’abord, assurez-vous d’avoir les autorisations nécessaires pour que la connexion Piste-Chorus Pro fonctionne. Voici les étapes à suivre :

a. Accédez au portail Chorus Pro et cliquez sur la rubrique “Organisation”, puis sélectionnez le domaine “Utilisateurs”, et ensuite “Gérer l’accès aux permissions utilisateur”.

b. Assurez-vous d’ajouter les permissions “Modification des raccordements” et “Consultation des raccordements” à l’utilisateur avec lequel vous souhaitez vous connecter.

Après avoir créé avec succès l’application et le compte technique, procédez à leur connexion pour exploiter les fonctionnalités de Chorus Pro. Voici les étapes :

a. Accédez au portail Chorus Pro et cliquez sur la rubrique “Connexions”, puis sélectionnez la rubrique “API” pour accéder au portail Chorus Pro.

b. Cliquez sur l’onglet “Gérer la connexion API” pour le processus de liaison. Assurez-vous d’avoir le nom exact de l’application créée avec les informations d’identification “Identifiant” du compte technique.

N.B : Vous ne pouvez avoir qu’un seul lien actif.

c. Cliquez sur “Déclaration de la demande de connexion API par PISTE”, remplissez les informations nécessaires, puis cliquez sur “Valider”.

Maintenant, le processus de connexion entre Piste et Chorus Pro est terminé.

Dans Cirrus Shield

1.Installer le plugin Chorus Pro :
Accédez à “Configuration” dans Cirrus Shield, puis sélectionnez “Extensions”. Installez le plugin Chorus Pro pour activer l’intégration.

2. Création des objets “Facture”, “Élément de ligne de facture” et “Compte” :
Pour utiliser efficacement le plugin Chorus Pro, assurez-vous que les objets “Facture”, “Élément de ligne de facture” et “Compte” sont créés avec des champs et des types de champs spécifiques. Consultez les images fournies ci-dessous pour obtenir des conseils.

a. Facture (Fixez les images)

b. Élément de ligne de facture

c. Compte

Pour pouvoir créer un objet, vous devez aller dans Configuration -> Objets et cliquer sur le bouton pour créer un objet.

Après avoir créé l’objet, accédez à “Champs personnalisés” et créez un nouveau champ, en vous basant sur les champs qui sont affichés dans l’image.

N.B : Assurez-vous de créer les champs avec le même nom et le même type que ceux des images concernant les objets “Facture”, “Élément de ligne de facture” et “Compte”.

Il convient de faire de même pour le reste des champs en se basant sur leur nom et leur type de champ.

Bouton JavaScript : Créez un bouton pour l’objet “Facture”. Pour pouvoir créer un bouton JavaScript, vous devez aller dans Configuration -> Objets -> Détails -> Boutons Personnalisés.

Ensuite, vous créez un bouton avec les informations suivantes :

Voici le code que vous utiliserez pour le bouton :

function SendToChorusPro() {
    var RecordID = GetRecordGUID();
    var UserID = GetOrganizationInfo();
    var modelName = window.location.search.slice(1).split("&")[0].split("=")[1];
    var userinfo = GetCurrentloggedInUserInfo();

    openPopup();

    function openPopup() {
        var popup = createPopup();
        document.body.appendChild(popup);

        var popupContent = createPopupContent();
        popup.appendChild(popupContent);

        var closeBtn = createCloseButton(popup);
        popupContent.appendChild(closeBtn);

        var loadingSpinner = createLoadingSpinner();
        popupContent.appendChild(loadingSpinner);

        var iframe = createIframe(RecordID, UserID, modelName, userinfo, loadingSpinner);
        popupContent.appendChild(iframe);
    }

    function createPopup() {
        var popup = document.createElement("div");
        popup.id = "myPopup";
        popup.style.cssText = "position: fixed; z-index: 9999999; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0); display: flex; justify-content: center; align-items: center;";
        return popup;
    }

    function createPopupContent() {
        var popupContent = document.createElement("div");
        popupContent.id = "popupContent";
        popupContent.style.cssText = "background-color: white; padding: 20px; border: 1px solid #888; width: 80%; height: 85%; position: relative;";
        return popupContent;
    }

   function createCloseButton(popup) {
    var closeBtn = document.createElement("span");
    closeBtn.innerHTML = "&times;";
    closeBtn.style.cssText = "position: absolute; top: 0; left: 98%; font-size: 28px; font-weight: bold; cursor: pointer;";
    closeBtn.onclick = function () {
        popup.style.display = "none";
        // Refresh the page upon closing the popup
        location.reload(true); // Pass true to force a reload from the server
    };
    return closeBtn;
}


    function createLoadingSpinner() {
        var loadingSpinner = document.createElement("div");
        loadingSpinner.id = "loadingSpinner";
        loadingSpinner.style.cssText = "position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);";

        // Add a simple loading spinner using CSS
        loadingSpinner.innerHTML = '<div class="spinner"></div>';
        var style = document.createElement("style");
        style.textContent = `
        #loadingSpinner .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
        loadingSpinner.appendChild(style);

        return loadingSpinner;
    }


    function createIframe(RecordID, UserID, modelName, userinfo, loadingSpinner) {
        var iframe = document.createElement("iframe");

        // Show loading spinner before the iframe is loaded
        loadingSpinner.style.display = "block";

        // Hide the loading spinner after the iframe has finished loading
        iframe.addEventListener("load", function () {
            loadingSpinner.style.display = "none";
        });

        iframe.src = `https://choruspro.cirrus-shield.net/${userinfo["Language"]}/SendInvoice?orgid=${UserID["Id"]}&objectName=${modelName}&RecordGuid=${RecordID}`;
        iframe.style.cssText = "width: 100%; height: 100%; border: none;";
        return iframe;
    }
}

Assurez-vous de modifier la visibilité du bouton en fonction des utilisateurs qui l’utiliseront. Vous pouvez le faire en accédant à l’objet où vous avez créé le bouton -> détails du bouton -> Profils.

Et enfin, vous pourrez voir le bouton dans la page de détails de l’enregistrement de l’objet spécifique choisi.

Configuration

Pour configurer le plugin que vous avez installé, vous devrez accéder aux détails du plugin Chorus Pro installé.

Fournissez vos identifiants Cirrus-Shield (nom d’utilisateur et mot de passe), les informations d’identification OAuth de l’application Piste (ID client et secret client), les identifiants du compte technique Chorus Pro (nom d’utilisateur Chorus-Pro et mot de passe Chorus-Pro), ainsi que le Siret représentant l’entreprise d’émission de factures. Cliquez sur “Créer” pour enregistrer votre configuration dans Cirrus-Shield.

Comment pouvons-nous aider ?