It is possible to set up a custom list, and the end user can select an item from that list when creating a message. For example, such a list could be to select a city from a drop-down list to get the proper weather feed for that city.
To configure the template, you will need to edit the .html file (see Update the HTML File) and .json file (see Update the params.json File). You will also need to have a javascript (.js) file.
HTML File
The .html file must have a div class that will contain the custom choices offered to the end user – in our example, it is a list of cities:
<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>The .html file must also contain a line that points to a local javascript file (for example, template.js) :
<script src="template.js"></script>Javascript File
The template.js file must contain the proper information for your custom choices (in our example, the weather feed):
$(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);
}JSON File
The params.json file must have a corresponding section that contains the custom choice offered to the end user (in our example, a list of cities):
{
"orientation": "landscape",
"fields": [
{
"id": "City",
"label": "Choose your city",
"default": "6077243",
"choices": [
{ "label": "Montreal", "value": "6077243" },
{ "label": "Kitchener", "value": "5992996" }
],
"type": "variable",
"mandatory": false
}
]
}