バーコード読み取りモバイルアプリケーションの画面カスタマイズ

// Tutorial6Controller.cls
public with sharing class Tutorial6Controller {
    
    // 読み取り結果を格納するSingleScanResultプロパティ
    public string singleScanResult {get;set;}

    // 読み取り結果を表示する要求に対して読み取り結果を返す
    public string getSingleScanOutputMessage() {
        // 読み取り結果に値が存在する場合
        if (this.singleScanResult != null) {
            // UTF-8でURLエンコードした結果を返す
            return EncodingUtil.urlDecode(this.singleScanResult, 'UTF-8');
        }
        return this.singleScanResult;
    }
}

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="singleScanResult" type="String"/>
    <aura:attribute name="singleScanResultOutout" type="String"/>  
    
    <h1>チュートリアル7</h1>
    <br/>
    <gcbc:GcBarcodeScannerLT
        aura:id="single-scan-button" 
        title="RayBarcodeウェブセミナー"
        font-color="Yellow"
        font-size="20"
        background-color="DarkGreen"
        opacity="1"
        buttonText="読み取り開始"
        scanResults="{!v.singleScanResult}"
        onScanComplete="{!c.onSingleScanComplete}"
        />            
    <br/>
    <ui:outputText value="{!v.singleScanResultOutout}"/>    
</aura:component>

({
    onSingleScanComplete: function (component, event, helper) {
        var result = event.getParam("success");
        if (result){
            var data = component.get("v.singleScanResult");
            // データがデコードされていない場合、
            // コンマ（,）はエスケープ文字列（%2C）になります
            var decodedData = decodeURIComponent(data);
            component.set("v.singleScanResultOutout", decodedData);            
        }else{
            alert("読み取り失敗");
        }
    },
})

<template>
    <h1>画面のカスタマイズ</h1>
    <div slot="actions">
        <gcbc-gc-barcode-scanner-lwc data-id="single-scan-button" button-text="読み取り開始"
            title="RayBarcodeウェブセミナー"
            font-color="Yellow"
            font-size="20"
            background-color="DarkGreen"
            opacity="1"
            onscancomplete={onSingleScanComplete}>
        </gcbc-gc-barcode-scanner-lwc>
    </div>
    <lightning-formatted-text value={singleScanResultOutput}></lightning-formatted-text>
</template>

import { LightningElement, track } from 'lwc';

export default class MyFirstCustomAppLwc extends LightningElement {
    @track singleScanResultOutput;

    onSingleScanComplete(event) {
        const data = event.detail;
        if (data && data.success) {
            const results = data.scanResults;
            this.singleScanResultOutput = decodeURIComponent(results);
        } else {
            alert("読み取りはできませんでした。");
        }
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>