QRDisplayView

Afficher un ou plusieurs codes QR : accès, billets.

Description

Le composant QRDisplayView affiche un unique code QR destiné à être scanné par les appareils des utilisateurs. Les cas d'usage courants incluent le partage de codes d'accès, de billets, d'informations de paiement, ou de toute donnée à transmettre par code QR.

Le code QR peut être fourni sous forme d'URL d'image ou de data URI encodée en base64. Le composant prend en charge un seul code QR, avec titre, description et options de configuration.

Description des champs

idstringrequis

Identifiant unique de la vue d'affichage QR

typestringrequis

Toujours "QRDisplay"

contentQRDisplayContentrequis

Objet de contenu de l'affichage QR

content.titlestringrequis

Titre de la vue affiché à l'utilisateur

content.introstringoptionnel

Texte d'introduction affiché avant le code QR

content.submitSubmitActionoptionnel

Bouton de soumission optionnel pour des actions (par exemple Partager, Exporter)

content.submit.textstringrequis*

Texte du bouton (requis si submit est défini)

content.submit.methodHttpMethodoptionnel

Méthode HTTP (par défaut : POST)

content.qrImagestringrequis

URL de l'image du code QR ou data URI en base64

content.qrTitlestringrequis

Titre du code QR

content.qrDescriptionstringrequis

Texte de description du code QR

content.qrConfigQRConfigoptionnel

Configuration d'affichage du code QR

content.qrConfig.sizenumberoptionnel

Taille du code QR en pixels

content.qrConfig.errorCorrectionstringoptionnel

Niveau de correction d'erreur : "L", "M", "Q", "H"

content.qrConfig.marginnumberoptionnel

Marge autour du code QR

content.qrConfig.colorobjectoptionnel

Configuration des couleurs

content.qrConfig.color.darkstringoptionnel

Couleur sombre (premier plan)

content.qrConfig.color.lightstringoptionnel

Couleur claire (arrière-plan)

processIdstringoptionnel

Identifiant de processus pour les parcours multi-étapes

metadataobjectoptionnel

Métadonnées de la vue (version, createdAt, author, tags)

Méthodes

setIntro(intro)→ this

Définit le texte d'introduction affiché avant le code QR

intro - Texte d'introduction

submitButton(text, method?)→ this

Définit le bouton de soumission pour les actions de l'affichage QR

text - Texte du bouton
method - Méthode HTTP (par défaut : POST)

setQRCode(qrImage, title, description, config?)→ this

Définit le code QR à afficher (remplace tout code QR existant)

qrImage - URL de l'image QR ou base64
title - Titre du code QR
description - Description du code QR
config - Options QRConfig

serve()→ Record<string, unknown>

Sert la vue avec validation (hérité de BaseView)

toJSON()→ Record<string, unknown>

Renvoie la représentation JSON (hérité de BaseView)

setState(key, value)→ void

Définit l'état de la vue (hérité de BaseView)

key - Clé d'état
value - Valeur d'état

getState(key)→ unknown

Lit l'état de la vue (hérité de BaseView)

key - Clé d'état

setNext(url)→ this

Définit la navigation vers la vue suivante (hérité de BaseView)

url - URL de la vue suivante

setPrev(url)→ this

Définit la navigation vers la vue précédente (hérité de BaseView)

url - URL de la vue précédente

setProcess(processId, context?)→ this

Définit le contexte de processus (hérité de BaseView)

processId - Identifiant de processus
context - Contexte de processus

Exemples de code JavaScript

Affichage QR de base

javascript

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const qrDisplay = yeriaApp
6    .createQRDisplayView('qrcode', 'Your QR Code')
7    .setIntro('This code gives you access to premium services')
8    .setQRCode(
9        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
10        'Subscription Code',
11        'Scan this code to activate your subscription',
12        { size: 200, errorCorrection: 'Q' }
13    );
14
15const response = yeriaApp.serve(qrDisplay);

Affichage QR avec une URL

javascript

1const qrDisplay = yeriaApp
2    .createQRDisplayView('ticket-qr', 'Your Ticket')
3    .setIntro('Present this QR code at the venue')
4    .setQRCode(
5        'https://example.com/qr/ticket-12345.png',
6        'Event Ticket',
7        'Scan this QR code for entry',
8        {
9            size: 250,
10            errorCorrection: 'H',
11            margin: 4
12        }
13    );

Affichage QR avec couleurs personnalisées

javascript

1const qrDisplay = yeriaApp
2    .createQRDisplayView('branded-qr', 'Branded QR Code')
3    .setIntro('Scan our branded QR code')
4    .setQRCode(
5        'https://example.com/qr/branded.png',
6        'Brand QR',
7        'Scan to visit our website',
8        {
9            size: 220,
10            errorCorrection: 'Q',
11            margin: 2,
12            color: {
13                dark: '#000000',
14                light: '#FFFFFF'
15            }
16        }
17    );

Affichage QR avec bouton de soumission

javascript

1const qrDisplay = yeriaApp
2    .createQRDisplayView('share-qr', 'Share QR Code')
3    .setIntro('Share this QR code with others')
4    .setQRCode(
5        'https://example.com/qr/share.png',
6        'Share Code',
7        'Scan to share access',
8        { size: 200 }
9    )
10    .submitButton('Share', 'POST');

Affichage QR avec correction d'erreur élevée

javascript

1const qrDisplay = yeriaApp
2    .createQRDisplayView('durable-qr', 'Durable QR Code')
3    .setIntro('This QR code can handle damage')
4    .setQRCode(
5        'https://example.com/qr/durable.png',
6        'Durable Code',
7        'High error correction for damaged codes',
8        {
9            size: 300,
10            errorCorrection: 'H',  // Highest error correction
11            margin: 4
12        }
13    );

Affichage QR dans un parcours multi-étapes

javascript

1const qrDisplay = yeriaApp
2    .createQRDisplayView('verification-qr', 'Verification QR')
3    .setProcess('verification', {
4        processName: 'Account Verification',
5        currentStep: 3,
6        totalSteps: 3,
7        stepName: 'Display QR'
8    })
9    .setIntro('Scan this QR code to complete verification')
10    .setQRCode(
11        'https://example.com/qr/verify.png',
12        'Verification Code',
13        'Scan to verify your account',
14        { size: 250, errorCorrection: 'Q' }
15    )
16    .submitButton('Complete Verification', 'POST');

Exemple JSON complet

json

1{
2  "id": "ticket-qr",
3  "type": "QRDisplay",
4  "content": {
5    "title": "Your Ticket",
6    "intro": "Present this QR code at the venue",
7    "submit": {
8      "text": "Share",
9      "method": "POST"
10    },
11    "qrImage": "https://example.com/qr/ticket-12345.png",
12    "qrTitle": "Event Ticket",
13    "qrDescription": "Scan this QR code for entry",
14    "qrConfig": {
15      "size": 250,
16      "errorCorrection": "H",
17      "margin": 4,
18      "color": {
19        "dark": "#000000",
20        "light": "#FFFFFF"
21      }
22    }
23  },
24  "metadata": {
25    "version": "1.0.0",
26    "createdAt": "2025-01-28T10:00:00.000Z"
27  }
28}

← Précédent

QRScanView

MessageView