Make the description/hint for custom component dynamic

Ask us anything How do I?
1

Hello again!

Asked on WeWeb OfficeHours this question, @flo said to make a topic.

Is there any way to make one input field for my component, but change its description and hint dynamically when other property changes?

The case: I’ve created a component for a lot of barcode types. And I want to show the expected format somehow. I’ve created a list of defaults and tried to use a simple js-binding like it’s made for hiding a property.

const barcodeDefaults = {
  ean5: { text: "90200" },
  ean2: { text: "05" },
  ean13: { text: "9520123456788" }, //comment
  ean8: { text: "95200002" },
  upca: { text: "012345000058" },
  upce: { text: "01234558" },
  isbn: { text: "978-1-56581-231-4 90000" },
  ismn: { text: "979-0-2605-3211-3" },
  issn: { text: "0311-175X 00 17" },
  code128: { text: "Count01234567!" },
  code39: { text: "THIS IS CODE 39" },
  code93: { text: "THIS IS CODE 93" },
  qrcode: { text: "http://goo.gl/0bis" },
  microqrcode: { text: "1234" },
  rectangularmicroqrcode: { text: "1234" },
  datamatrix: { text: "This is Data Matrix!" },
  datamatrixrectangular: { text: "1234" },
  azteccode: { text: "This is Aztec Code" },
  pdf417: { text: "This is PDF417" },
  micropdf417: { text: "MicroPDF417" },
  maxicode: { text: "MaxiCode Example" },
  dotcode: { text: "This is DotCode" },
  gs1databar: { text: "(01)09521234543213" },
  gs1databarexpanded: { text: "(01)09521234543213(3103)000123" },
  gs1databarstacked: { text: "(01)09521234543213" },
  hibccode128: { text: "A999BJC5D6E71" },
  hibccode39: { text: "A999BJC5D6E71" },
  auspost: { text: "5956439111ABA 9" },
  kix: { text: "1231FZ13XHS" },
  japanpost: { text: "6540123789-A-K-Z" },
  msi: { text: "0123456789" },
  plessey: { text: "01234ABCD" },
  telepen: { text: "ABCDEF" },
  codabar: { text: "A0123456789B" },
  code11: { text: "0123456789" },
  code25: { text: "01234567" },
  interleaved2of5: { text: "2401234567" },
  matrix2of5: { text: "01234567" },
};

export default {
  editor: {
    label: { en: "Barcode Advanced Generator" },
    icon: "tag",
  },
  properties: {
    // === Core Props ===
    barcodeType: {
      label: { en: "Barcode Type" },
      type: "TextSelect",
      section: "style",
      bindable: true,
      defaultValue: "code128",
      options: {
        options: [
          { value: "ean13", label: "EAN-13" },
          { value: "ean8", label: "EAN-8" },
          { value: "ean14", label: "EAN-14" },
          { value: "ean2", label: "EAN-2" },
          { value: "ean5", label: "EAN-5" },
          { value: "upca", label: "UPC-A" },
          { value: "upce", label: "UPC-E" },
          { value: "isbn", label: "ISBN" },
          { value: "issn", label: "ISSN" },
          { value: "ismn", label: "ISMN" },
          { value: "itf14", label: "ITF-14" },
          { value: "identcode", label: "Deutsche Post Identcode" },
          { value: "leitcode", label: "Deutsche Post Leitcode" },
          { value: "planet", label: "PLANET" },
          { value: "postnet", label: "POSTNET" },
          { value: "onecode", label: "USPS Intelligent Mail" },
          { value: "pharmacode", label: "Pharmacode" },
          { value: "pharmacode2", label: "Pharmacode Two-Track" },
          { value: "pzn", label: "PZN" },
          { value: "sscc18", label: "SSCC-18" },

          // Alphanumeric barcodes
          { value: "code128", label: "Code 128" },
          { value: "code39", label: "Code 39" },
          { value: "code93", label: "Code 93" },
          { value: "qrcode", label: "QR Code" },
          { value: "microqrcode", label: "Micro QR Code" },
          {
            value: "rectangularmicroqrcode",
            label: "Rectangular Micro QR Code",
          },
          { value: "datamatrix", label: "Data Matrix" },
          { value: "datamatrixrectangular", label: "Data Matrix Rectangular" },
          { value: "azteccode", label: "Aztec Code" },
          { value: "pdf417", label: "PDF417" },
          { value: "micropdf417", label: "MicroPDF417" },
          { value: "maxicode", label: "MaxiCode" },
          { value: "dotcode", label: "DotCode" },
          { value: "gs1databar", label: "GS1 DataBar" },
          { value: "gs1databarexpanded", label: "GS1 DataBar Expanded" },
          { value: "gs1databarstacked", label: "GS1 DataBar Stacked" },
          { value: "hibccode128", label: "HIBC Code 128" },
          { value: "hibccode39", label: "HIBC Code 39" },
          { value: "auspost", label: "Australia Post" },
          { value: "kix", label: "Royal Dutch TPG Post KIX" },
          { value: "japanpost", label: "Japan Post" },
          { value: "msi", label: "MSI" },
          { value: "plessey", label: "Plessey" },
          { value: "telepen", label: "Telepen" },
          { value: "codabar", label: "Codabar" },
          { value: "code11", label: "Code 11" },
          { value: "code25", label: "Code 25" },
          { value: "interleaved2of5", label: "Interleaved 2 of 5" },
          { value: "matrix2of5", label: "Matrix 2 of 5" },
        ],
      },
    },

    // === Data entry fields ===
    data: {
      label: { en: "Data" },
      type: "Text",
      section: "style",
      bindable: true,
      defaultValue: "HELLO123" /* wwEditor:start */,
      bindingValidation: {
        type: "string",
        tooltip: "Bind to a value (letters and/or numbers).",
      },
      propertyHelp: {
        tooltip: "Enter a value (letters and/or numbers).",
      } /* wwEditor:end */,
    },

how it’s usually work for hiding:


      hidden: (c) =>
        ![
          "datamatrix",
          "datamatrixrectangular",
          "datamatrixrectangularextension",
        ].includes(c.barcodeType),

so I tried to use an inline function for propertyHelp and tooltip and didn’t succeeded.

Any way to do it other from creating an input field for each type of the barcode?