Vue normale

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.
À partir d’avant-hierChlouchloutte ¯\_(ツ)_/¯

Note: Exécution de code javascript dans une page Confluence

4 mai 2020 à 14:50

Hello,

Petite note, pour plus tard.
Supposons que je doive utiliser Confluence et que je veuille un module de vote... Et que cette macro ne soit pas disponible !

Comment faire ?

Dans votre page Confluence, rajoutez un composant "HTML" (macro). Si c'est du JS, bon mettez le à la fin de la page, si c'est du css, mettez-le au début (soyons propres).

Confluence propose JQuery. Il est accessible via le raccourci AJS.xxx.

Si vous avez besoin de stocker des variables, l'API REST Confluence (version > 5.5) permet de stocker des properties.
Attention cependant, les seuls types REST dispos sont GET, POST, DELETE. Pas de PUT, ce qui veut dire qu'à chaque changement, il faut faire un DELETE - POST !

Voici un exemple codé rapidement. Ma property à stocker s'appelle "election" :

    <ac:layout-cell>
      <ac:structured-macro ac:macro-id="33e368de-3e17-4323-908c-2bb1639febe3" ac:name="html" ac:schema-version="1">
        <ac:plain-text-body><![CDATA[
<script type="text/javascript">
AJS.toInit(function() {

    var votes= {"votesPourA": 0, "votesPourB": 0};

    function deleteElections() {
       jQuery.ajax({
          contentType: 'application/json',
          type: 'DELETE',
          url: contextPath + "/rest/api/content/" + AJS.params.contentId + "/property/elections",
          success: function(response) {
              updateVotes();
          },
          error: function(error) {
              if(error.status== 401 || error.status== 402 || error.status== 403) {
                  alert("you need to be connected in order to vote")
              }
          }
        });
    }

    function updateVotes() {
        jQuery.ajax({
          contentType: 'application/json',
          type: 'POST',
          url: contextPath + "/rest/api/content/" + AJS.params.contentId + "/property",
          data: "{ \"key\" : \"elections\", \"value\" : \""+ JSON.stringify(votes).replace(/"/g, '\\"') +"\" }",
          success: function(response) {
            retrieveVotes();
          },
          error: function(error) {
              if(error.status== 401 || error.status== 402 || error.status== 403) {
                  alert("you need to be connected in order to vote")
              }
          }
        });
    }  

     function retrieveVotes() {
        jQuery.ajax({
          contentType: 'application/json',
          type: 'GET',
          url: contextPath + "/rest/api/content/" + AJS.params.contentId + "/property/",
          success: function(response) {
             response.results.forEach(function (item, index) {
                if(item.key == "elections") {
            votes = JSON.parse(item.value);
                    AJS.$("#voteAspan").text(votes.votesPourA + ' votes');
                    AJS.$("#voteBspan").text('votes.votesPourB + ' votes');
        }
            });
          }
        });
    }  

    AJS.$("#votePourAButton").click(function() {
         votes.votesPourA = votes.votesPourA + 1;
         deleteElections();
    });

    AJS.$("#votePourBButton").click(function() {
         votes.votesPourB = votes.votesPourB + 1;
         deleteElections();
    });

    setTimeout(() => { retrieveVotes() }, 2000);  // This is because AJS.params.contentId property is not available immediatly.

 });
</script>
]]></ac:plain-text-body>
      </ac:structured-macro>
    </ac:layout-cell>

Permalien

❌
❌