How-Tos

How to use QR and barcodes

In this video, you will learn how to use QR and barcodes in Centrldesk.

In this video, you will learn how to use QR and barcodes in Centrldesk.

QR and barcodes are useful for many use cases, for example for marking documents or contracts and being able to uniquely identify them again later. In this example, we automatically create a document that contains a QR code and a barcode. So let's start building our application:


Steps:

  1. First, we go to the page editor by clicking on the Edit Page button.
  2. Add a button using drag and drop.
  3. Change the name of the button to "Create Document with QR and Barcode", and choose an icon and a color.
  4. With Centrldesk, you can easily customize your applications and graphical user interfaces to meet your needs.
  5. Next, we add an action to the button by clicking the "Add" function on the "On Click" event.
  6. The Flow Editor opens.
  7. On the left side, under Libraries, we now drag and drop the "File Processing" element into the center of the Flow Editor.
  8. The "File Processing" dialog opens.
  9. Select "Create QR-/Barcode" on the left side and confirm with OK.
  10. On the left side, under Libraries, we now drag and drop the "File Processing" element into the center of the Flow Editor.
  11. The "File Processing" dialog opens.
  12. Select "Create QR-/Barcode" on the left side and confirm with OK.
  13. On the left side, under App Components, we now drag and drop the "Document" element into the center of the Flow Editor.
  14. The "Use Document" dialog opens.
  15. Select "New Document", enter a name for the document, and confirm with OK.
  16. On the left side, under Libraries, we now drag and drop the "File Processing" element into the center of the Flow Editor.
  17. The "File Processing" dialog opens.
  18. Select "Convert to PDF" on the left side and confirm with OK.
  19. On the left side, under Libraries, we now drag and drop the "File Processing" element into the center of the Flow Editor.
  20. The "File Processing" dialog opens.
  21. Select "Download Files" on the left side and confirm with OK.
  22. Connect the upper output of the upper Create QR Code and Barcode block to the input of the Document block.
  23. Connect the lower output of the upper Create QR Code and Barcode block to the input of the Document block.
  24. Connect the output of the Document block to the input of the Convert to PDF block.
  25. Connect the output of the Convert to PDF block to the input of the Download Files block.
  26. Select the upper Create QR Code and Barcode block.
  27. Select a type on the right side, in our example Code-128.
  28. On the right side at Value select "Enter Value" and enter a value.
  29. Select the lower Create QR Code and Barcode block.
  30. Select a type on the right side, in our example QR Code.
  31. On the right side at Value select "Enter Value" and enter a value.
  32. Centrldesk offers a wide range of different barcodes for generation, for example, Code-39, Code-128, EAN, MSI, UPC, Pharmacode, or Codabar.
  33. Select the document and click Edit Document.
  34. The document editor opens.
  35. In order to use the barcodes queried earlier in our flow we need to create two variables.
  36. On the left side, click New under Variables.
  37. Enter a name, select "File" for the type, select the Input Checkbox, and confirm with OK.
  38. Now click the black arrow to use the variable content in your document.
  39. On the left side, click New under Variables.
  40. Enter a name, select "File" for the type, select the Input Checkbox, and confirm with OK.
  41. Now click the black arrow to use the variable content in your document.
  42. Then we can resize and align the images and customize our document if needed.
  43. Close the document editor by clicking Close in the upper left corner.
  44. Select the document block.
  45. Select Custom on the right side.
  46. Click on Edit Logic.
  47. Set the mode at the top from Autoconnect to Manual.
  48. Drag and drop the two barcode image blocks from the left side to the center of the Logic Editor.
  49. Connect the outputs of the barcode image blocks to the corresponding inputs of the document.
  50. Close the Logic Editor by clicking close in the upper right corner.
  51. Select the Convert to PDF block and give the file a name by selecting Enter Value under Filename on the right side and entering a file name.
  52. Select the Download Files block and choose the value "Converted PDF" under "Source One" on the right side.
  53. Close the Flow Editor by clicking close in the upper right corner.
  54. Close the Page Editor by clicking close in the upper left corner.
  55. Now we can start using our application.
  56. Clicking on the "Create Document with QR and Barcode" generates our document.
  57. The Downloads dialog with the automatically created PDF file is displayed.
  58. Clicking on the document will open the PDF with the generated QR Code and Barcode.

Similar posts

Subscribe to our newsletter

Stay up to date on upcoming news and topics of creating web apps without code.