Attendre que le DOM soit prêt

function ready(fn) {
  // La fonction fn ne sera exécutée qu'après le chargement du DOM
  if (document.readyState !== 'loading') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function () {
  document.getElementById("acl").addEventListener("click", function () {  ...;  });
  
  grist.ready(...);
  
  grist.onRecords(table => { ... });
  
  grist.onRecord(record => { ... });

  ... 
  
});

Exécuter une API GRIST

On peut exécuter une API GRIST depuis un plugin

// Récupère le contenu d'une table du document
async function query1(table) {
  const tokenInfo = await grist.docApi.getAccessToken({readOnly: true});
  // le endpoint Tables/id_table/records pour le document courant
  const url = tokenInfo.baseUrl + `/tables/${table}/records?auth=${tokenInfo.token}`;
  const response = await fetch(url, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  }
  });
  return response.json();
}

Exécuter une API EXTERNE

On peut exécuter une API EXTERNE depuis un plugin

// Récupère le contenu de https://geo.api.gouv.fr/regions
async function query2() {
  const url = "https://geo.api.gouv.fr/regions";
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    }
  });
  return response.json();
}

Spécifier les colonnes d'un widget

On peut spécifier les colonnes utilisables dans un widget

const columnsMappingOptions = [
    {
      name: "dateValidite",
      title: "Date de validité",
      optional: false,
      type: "Date,DateTime",
      description: "début de la validité",
      allowMultiple: false,
      strictType: true
    },
    {
      name: "type",
      title: "Type de référence",
      optional: true,
      type: "Choice,ChoiceList",
      description: "Type de la référence",
      allowMultiple: false
    }
  ];
grist.ready({ columns: columnsMappingOptions });

grist.onRecords((rows, mappings) => {
  document.getElementById('col1').innerHTML = mappings.dateValidite;
  document.getElementById('col2').innerHTML = mappings.type;
});

2 colonnes paramétrables doivent apparaitre dans la barre latérale de configuration du widget

• Date de validité - colonne associée : // Modifier la colonne associée pour voir changer la valeur
• Type de référence - colonne associée : // Modifier la colonne associée pour voir changer la valeur

Les options dans un widget

sont des paires cle-valeur qui persistent lorsqu'on enregistre le widget. On peut donc s'en servir pour un paramétrage externe du widget

grist.onOptions((options, settings) => {
  document.getElementById('dump3').innerHTML = "options.titre = " + options.titre;
});

async function changeOption() {
  await grist.setOption("titre", document.getElementById('optiontitre').value);  
}

Lorsqu'on a plusieurs options à modifier, il est préférable de passer par grist.setOptions({...}) qui permet de passer un tableau de paires cle-valeur

Les plugin API : fetchtable

On peut accéder au contenu d'une table avec fetchtable

function fetch_table(table, div) {
  grist.docApi.fetchTable(table).then(function(records) {
    document.getElementById(div).innerHTML = JSON.stringify(records, null, 2);
  });
}

Les plugin API : ajouter, modifier, supprimer un enregistrement

Avec applyUserActions

function add_agent() {
  let newagent = {
    "nom"  : "newagent",
    "email": "new@yopmail.com",
    "role" : ["L","USER"]
  }
  grist.docApi.applyUserActions([ ['AddRecord', "Salaries", -1, newagent] ]).then(function(e) {
    msg("agent ajouté");
  }).catch(function(e) {
    msg("erreur ajout agent " + String(e));
  });
}

function supp_agent(id_agent) {
  grist.docApi.applyUserActions([ ['RemoveRecord', 'Salaries', id_agent] ]).then(function(e) {
    msg("agent supprimé");
  }).catch(function(e) {
    msg("erreur suppression agent " + String(e));
  });
}

function maj_team(id_user, texte) {
  grist.docApi.applyUserActions([ ['UpdateRecord', "Salaries", id_user, {
    ["lib"]: texte
  }]]).then(function(e) {
    msg("maj ok");
  }).catch(function(e) {
    msg("erreur " + String(e));
  });
}

Les plugin API : lister les tables

Avec listTables()

function list_tables() {
  grist.docApi.listTables().then(function(tables) {
    document.getElementById('dump').innerHTML = JSON.stringify(tables);
  });
}