Configurer le modèle pour une liste personnalisée

Il est possible de configurer une liste personnalisée, et l'utilisateur final peut sélectionner un élément dans cette liste lors de la création d'un message. Par exemple, une telle liste pourrait permettre de sélectionner une ville à partir d'une liste déroulante afin d'obtenir les informations météorologiques appropriées pour cette ville.

Pour configurer le modèle, vous devrez modifier les fichiers .html (voir Mettre à jour le fichier HTML) et les fichiers .json (voir Mettre à jour le fichier params.json). Vous devrez également avoir un fichier javascript (.js).

Fichier HTML

Le fichier .html doit avoir une classe div contenant les choix personnalisés proposés à l'utilisateur final – dans notre exemple, une liste de villes :

<div class="text-content">
    <h1>Current weather in <span id="city"></span></h1>
    <h1 id="currentWeather"></h1>
    <h2 data-bali-id="City">6077243</h2>
</div>

Le fichier .html doit également contenir une ligne qui pointe vers un fichier javascript local (par exemple, template.js) :

<script src="template.js"></script>

Fichier Javascript

Le fichier template.js doit contenir les informations appropriées pour vos choix personnalisés (dans notre exemple, le flux météo) :

$(document).ready(() => {
  $('[data-bali-id="City"]').bind("DOMSubtreeModified", handleWeatherAPI);

  function handleWeatherAPI() {
    const cityID = $('[data-bali-id="City"]').text().trim();
    if (cityID) {
      $.get(
        "https://api.openweathermap.org/data/2.5/weather?id=" +
          cityID +
          "&APPID=94a8dccc738dec79153f2ec1693a592f",
        function (res) {
          var tempInCelcius = kelvinToCelcius(res.main.temp);
          $("#city").text(res.name);
          $("#currentWeather").text(tempInCelcius + " °C");
        }
      );
    }
  }

  handleWeatherAPI();
});

function kelvinToCelcius(kelvin) {
  return parseFloat(kelvin - 273.15).toFixed(1);
}

Fichier JSON

Le fichier params.json doit avoir une section correspondante pour chacun des choix personnalisés proposés à l'utilisateur final (dans notre exemple, une liste de villes) :

{
  "orientation": "landscape",
  "fields": [
    {
      "id": "City",
      "label": "Choose your city",
      "default": "6077243",
      "choices": [
        { "label": "Montreal", "value": "6077243" },
        { "label": "Kitchener", "value": "5992996" }
      ],
      "type": "variable",
      "mandatory": false
    }
  ]
}