Skip to content

Latest commit

 

History

History
410 lines (343 loc) · 6.46 KB

QUICK-REFERENCE.md

File metadata and controls

410 lines (343 loc) · 6.46 KB

Référence rapide - Snippets Budibase

Table des matières

  1. Notifications
  2. CRUD Data
  3. DOM Manipulation
  4. Utilitaires
  5. Exemples complets

Notifications

Success

budibase.notify.success("Message de succès")

Error

budibase.notify.error("Message d'erreur")

Warning

budibase.notify.warning("Message d'avertissement")

Info

budibase.notify.info("Message d'information")

CRUD Data

Search (Recherche)

budibase.API.searchTable({
  tableId: "ta_TABLE_NAME",
  query: {
    equal: { field: "value" }
  },
  limit: 50,
  sort: "created_at",
  sortOrder: "descending"
}).then(r => console.log(r.data))

Create (Création)

budibase.API.saveRow({
  tableId: "ta_TABLE_NAME",
  field1: "value1",
  field2: "value2"
}).then(r => console.log(r))

Read (Lecture)

budibase.API.fetchRow({
  tableId: "ta_TABLE_NAME",
  rowId: "ro_XXXXX"
}).then(r => console.log(r))

Update (Mise à jour)

budibase.API.fetchRow({
  tableId: "ta_TABLE_NAME",
  rowId: "ro_XXXXX"
}).then(row => {
  return budibase.API.saveRow({
    ...row,
    fieldToUpdate: "newValue"
  })
})

Delete (Suppression)

budibase.API.deleteRow({
  tableId: "ta_TABLE_NAME",
  rowId: "ro_XXXXX",
  revId: "1-XXXXX"
})

DOM Manipulation

Créer élément

const el = document.createElement('div')
el.textContent = 'Content'
el.className = 'my-class'
document.querySelector('.container').appendChild(el)

Ajouter événement

document.querySelector('.btn').addEventListener('click', (e) => {
  e.preventDefault()
  console.log('Clicked!')
})

Toggle visibilité

const el = document.querySelector('.element')
el.style.display = el.style.display === 'none' ? 'block' : 'none'

Modifier style

const el = document.querySelector('.element')
el.style.backgroundColor = '#4CAF50'
el.style.color = 'white'

Utilitaires

Console log

console.log('Label:', variable)
console.table(arrayOrObject)

Délai (setTimeout)

setTimeout(() => {
  // Code à exécuter
}, 3000) // 3 secondes

Intervalle (setInterval)

const id = setInterval(() => {
  // Code répété
}, 5000) // 5 secondes
// Arrêter: clearInterval(id)

Condition

if (condition) {
  // Si vrai
} else {
  // Si faux
}

User info

const user = budibase.auth
console.log(user.email)
console.log(user.roleId)

Exemples complets

Formulaire avec validation

// Récupération
const data = {
  name: document.querySelector('#name').value,
  email: document.querySelector('#email').value
}

// Validation
if (!data.name || !data.email) {
  budibase.notify.error("Champs manquants")
  return
}

// Email valide
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
  budibase.notify.error("Email invalide")
  return
}

// Sauvegarde
budibase.API.saveRow({
  tableId: "ta_contacts",
  ...data,
  submitted_at: new Date().toISOString()
}).then(() => {
  budibase.notify.success("Envoyé !")
  document.querySelector('form').reset()
})

Tableau dynamique

budibase.API.searchTable({
  tableId: "ta_products",
  limit: 100
}).then(result => {
  let html = '<table><thead><tr>'

  // En-têtes
  Object.keys(result.data[0]).forEach(key => {
    if (!key.startsWith('_')) {
      html += `<th>${key}</th>`
    }
  })
  html += '</tr></thead><tbody>'

  // Lignes
  result.data.forEach(row => {
    html += '<tr>'
    Object.entries(row).forEach(([k, v]) => {
      if (!k.startsWith('_')) {
        html += `<td>${v || '-'}</td>`
      }
    })
    html += '</tr>'
  })
  html += '</tbody></table>'

  document.querySelector('#container').innerHTML = html
})

Dashboard stats

budibase.API.searchTable({
  tableId: "ta_orders",
  limit: 1000
}).then(result => {
  const stats = {
    total: result.data.length,
    active: result.data.filter(i => i.status === 'active').length,
    completed: result.data.filter(i => i.status === 'completed').length
  }

  const html = `
    <div class="stats">
      <div><h3>Total</h3><p>${stats.total}</p></div>
      <div><h3>Actifs</h3><p>${stats.active}</p></div>
      <div><h3>Terminés</h3><p>${stats.completed}</p></div>
    </div>
  `

  document.querySelector('#stats').innerHTML = html
})

Query filters (searchTable)

Exact match

query: {
  equal: {
    status: "active",
    type: "premium"
  }
}

Not equal

query: {
  notEqual: {
    status: "deleted"
  }
}

Range

query: {
  range: {
    price: {
      low: 10,
      high: 100
    }
  }
}

String search

query: {
  string: {
    name: "search term"
  }
}

Empty / Not empty

query: {
  empty: {
    description: true
  },
  notEmpty: {
    email: true
  }
}

Objets disponibles

budibase.auth

{
  email: "user@example.com",
  roleId: "ADMIN",
  _id: "us_xxxxx",
  firstName: "John",
  lastName: "Doe"
}

budibase.component

{
  id: "component_id",
  type: "custom",
  styles: {...}
}

budibase.app

{
  appId: "app_xxxxx",
  name: "My App",
  url: "/app/my-app"
}

budibase.route

{
  path: "/current/path",
  params: { id: "123" },
  query: { search: "term" }
}

Bonnes pratiques

✅ Toujours gérer les erreurs

.then(result => { /* succès */ })
.catch(error => {
  console.error(error)
  budibase.notify.error("Erreur")
})

✅ Valider les données

if (!data.field) {
  budibase.notify.error("Champ requis")
  return
}

✅ Donner du feedback

budibase.notify.success("Action réussie")

✅ Logger pour déboguer

console.log('Debug:', variable)

✅ Tester avec onClick d'abord

Mode: onClick → Test → Passer à onMount

Configuration du plugin

  1. Activez "Accès au contexte Budibase"
  2. Choisissez le mode :
    • onMount - Auto au chargement
    • onClick - Manuel via bouton
    • onInterval - Périodique
  3. Collez votre code JavaScript
  4. Testez !

Support

MEMORA Solutions

Version 1.0.0 - MIT License