@lowdefy/docs 3.22.0 → 3.23.2

package/howto/generateCsv/lowdefy.yaml

@@ -0,0 +1,63 @@
+lowdefy: 3.23.2
+name: Generate PDF from data with Lowdefy
+
+app:
+  html:
+    appendHead: |
+      <script type="module" src="/public/csvMake.js"></script>
+
+pages:
+  - id: example
+    type: PageHeaderMenu
+    properties:
+      title: Example
+    areas:
+      content:
+        justify: center
+        blocks:
+          - id: generate_csv
+            type: Button
+            properties:
+              size: large
+              title: Generate a CSV
+              color: '#1890ff'
+            events:
+              onClick:
+                - id: generate_csv
+                  type: JsAction
+                  params:
+                    name: csvMake
+                    args:
+                      - profiles.csv # csv filename
+                      - - Username: booker12 # an array of data, usually a reference
+                          Identifier: 9012
+                          FirstName: Rachel
+                          LastName: Booker
+                        - Username: grey07
+                          Identifier: 2070
+                          FirstName: Laura
+                          LastName: Grey
+                        - Username: johnson81
+                          Identifier: 4081
+                          FirstName: Craig
+                          LastName: Johnson
+                        - Username: jenkins46
+                          Identifier: 9346
+                          FirstName: Mary
+                          LastName: Jenkins
+                        - Username: smith79
+                          Identifier: 5079
+                          FirstName: Jamie
+                          LastName: Smith
+                      - - Username # an array of field definitions
+                        - Identifier
+                        - FirstName
+                        - LastName
+      footer:
+        blocks:
+          - id: footer
+            type: Paragraph
+            properties:
+              type: secondary
+              content: |
+                Made by a Lowdefy 🤖

package/howto/generateCsv/public/csvMake.js

@@ -0,0 +1,27 @@
+const csvMakeFn = async (context, filename, data, fields) => {
+  if (!Array.isArray(data) || typeof data[0] !== 'object') {
+    throw new Error('csvMake data takes an array of objects');
+  }
+  if (!fields) {
+    fields = Object.keys(data[0]);
+  }
+  const arrays = [fields];
+  data.forEach((obj) => arrays.push(fields.map((field) => obj[field])));
+  const csv = arrays
+    .map((row) =>
+      row
+        .map((cell) => (typeof cell === 'undefined' || cell === null ? '' : cell))
+        .map(String)
+        .map((v) => v.replaceAll('"', '""'))
+        .map((v) => `"${v}"`)
+        .join(',')
+    )
+    .join('\r\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const el = document.createElement('a');
+  el.href = url;
+  el.setAttribute('download', filename);
+  el.click();
+};
+window.lowdefy.registerJsAction('csvMake', csvMakeFn);

package/howto/generatePdf/inv_template.yaml

@@ -0,0 +1,200 @@
+- _nunjucks:
+    on:
+      _state: invoice
+    template: 'INV-{{ id }}-{{ inv_date | date("DD-MM-YYYY") }}.pdf'
+- pageMargins: [50, 25, 50, 70]
+  defaultStyle:
+    fontSize: 10
+  images:
+    logo:
+      _string.concat:
+        - _location: origin
+        - /public/logo_example.png
+  footer:
+    _function:
+      - columns:
+          - qr:
+              _string.concat:
+                - _location: origin
+                - /invoice?id="
+                - _state: invoice.id
+                - '"'
+            margin: [50, 0, 0, 0]
+            fit: '64'
+          - alignment: 'right'
+            fontSize: 7
+            margin: [0, 0, 50, 0]
+            text:
+              __nunjucks:
+                template: 'Page {{ page }} of {{ total }}'
+                on:
+                  page:
+                    __args: 0
+                  total:
+                    __args: 1
+  content:
+    - columns:
+        - width: 'auto'
+          margin: [0, 20, 0, 0]
+          stack:
+            - fontSize: 9
+              text: |
+
+            - fontSize: 7
+              text: |
+                Example Services Ltd.
+                112 Street Name
+                City, State 12345
+                Country
+                001-AB
+
+                +00-1234-5566
+                info@example.com
+
+                Vat Number: 444 5555 0000
+
+        - width: '*'
+          text: ' '
+        - width: 110
+          stack:
+            - width: 110
+              image: logo
+            - margin: [0, 5, 0, 0]
+              alignment: right
+              fontSize: 7
+              text: |
+                Example Services Ltd.
+                Reg Number: 2001/22224/09
+
+    - margin: [0, 20, 0, 20]
+      text: Customer Invoice
+      bold: true
+      alignment: center
+      fontSize: 14
+    - columns:
+        - width: 150
+          bold: true
+          text: |
+            INVOICE NUMBER:
+            DATE ISSUED:
+            ACCOUNT NUMBER:
+        - width: '*'
+          text:
+            _nunjucks:
+              template: |
+                {{ id }}
+                {{ inv_date | date("YYYY/MM/DD") }}
+                {{ account_id }}
+              on:
+                _state: invoice
+        - width: 150
+          bold: true
+          text: |
+            CUSTOMER:
+            ADDRESS:
+        - width: '*'
+          text:
+            _nunjucks:
+              template: |
+                {{ customer.name }}
+                {{ customer.address }}
+              on:
+                _state: invoice
+
+    - layout: 'lightHorizontalLines'
+      margin: [0, 10, 0, 0]
+      table:
+        widths: [70, '*', 70, 70, 70]
+        headerRows: 1
+        body:
+          _json.parse:
+            _nunjucks:
+              on:
+                services:
+                  _state: invoice.services
+              template: |
+                [
+                  [
+                    { "text": "ITEM CODE", "bold": true },
+                    { "text": "SERVICE", "bold": true },
+                    { "text": "UNIT PRICE", "bold": true, "alignment": "right"  },
+                    { "text": "QTY", "bold": true, "alignment": "right"  },
+                    { "text": "COST", "bold": true, "alignment": "right" }
+                  ],
+                  {% for item in services %}
+                  [
+                    "{{ loop.index }}: {{ item.code }}",
+                    "{{ item.name | safe }}",
+                    { "text": "{{ ( item.price / item.qty ).toFixed(2) }}", "alignment": "right"},
+                    { "text": "{{ item.qty }}", "alignment": "right"},
+                    { "text": "{{ item.price.toFixed(2) }}", "alignment": "right"}
+                    {% if loop.last %} ] {% else %} ], {% endif %}
+                  {% endfor %}
+                ]
+    - layout: 'headerLineOnly'
+      margin: [0, -5, 0, 0]
+      table:
+        widths: ['*', 70, 70, 70]
+        headerRows: 1
+        body:
+          - - ''
+            - ''
+            - ''
+            - ''
+          - - ''
+            - alignment: right
+              text: 'Subtotal:'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.subtotal
+                  - 2
+          - - ''
+            - alignment: right
+              text: 'Discount (5%):'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.discount
+                  - 2
+          - - ''
+            - alignment: right
+              text: 'VAT (15%):'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.vat
+                  - 2
+          - - ''
+            - alignment: right
+              text: 'Total:'
+            - ''
+            - alignment: right
+              text:
+                _number.toFixed:
+                  - _state: invoice.total
+                  - 2
+    - layout: 'headerLineOnly'
+      margin: [0, -5, 0, 0]
+      table:
+        widths: ['*', 70, 70, 70]
+        headerRows: 1
+        body:
+          - - ''
+            - ''
+            - ''
+            - ''
+          - - ''
+            - alignment: right
+              bold: true
+              text: 'BALANCE DUE:'
+            - ''
+            - alignment: right
+              bold: true
+              text:
+                _number.toFixed:
+                  - _state: invoice.balance
+                  - 2

package/howto/generatePdf/lowdefy.yaml

@@ -0,0 +1,116 @@
+lowdefy: 3.23.2
+name: Generate PDF from data with Lowdefy
+
+app:
+  html:
+    appendHead:
+      _ref: my_header.html
+
+pages:
+  - id: example
+    type: PageHeaderMenu
+    properties:
+      title: Example
+    events:
+      onEnter:
+        - id: init_data
+          type: SetState
+          params:
+            invoice:
+              id: '0030135'
+              account_id: 'A-11344'
+              inv_date:
+                _date: now
+              subtotal: 397.034
+              discount: -19.8517
+              vat: 59.5551
+              total: 436.7374
+              balance: 413.2330
+              customer:
+                name: Service Center
+                phone: +123-456-7890
+                vat_nmr: 12-333-4567
+                address: |
+                  123 Main St.
+                  Anytown
+                  CA
+                  US
+                  9999
+              services:
+                - name: Hosting and Maintannce
+                  qty: 1
+                  price: 235.90
+                  code: X12-33C
+                - name: Developer Hours
+                  qty: 16
+                  price: 60.345
+                  code: X12-39A
+                - name: Designer Hours
+                  qty: 4
+                  price: 40.122
+                  code: X12-21A
+                - name: Project Management
+                  qty: 2
+                  price: 60.667
+                  code: X12-49A
+    areas:
+      content:
+        justify: center
+        blocks:
+          - id: content_card
+            type: Card
+            style:
+              maxWidth: 800
+            blocks:
+              - id: content
+                type: Result
+                properties:
+                  title: Generate PDF from data with Lowdefy
+                  subTitle: <a href="https://docs.lowdefy.com/generate-pdf-document-from-data">Read the full how to guide</a>
+                  icon:
+                    name: PrinterTwoTone
+                    color: '#ff0000'
+                areas:
+                  extra:
+                    gutter: 16
+                    blocks:
+                      - id: customer_description
+                        type: Descriptions
+                        properties:
+                          bordered: true
+                          size: small
+                          title:
+                            _string.concat:
+                              - 'Customer Details: '
+                              - _state: invoice.account_id
+                          column: 2
+                          items:
+                            _change_case.capitalCase:
+                              options:
+                                convertKeys: true
+                              on:
+                                _state: invoice.customer
+
+                      - id: generate_pdf_button
+                        type: Button
+                        properties:
+                          size: large
+                          title: Generate Invoice
+                          color: '#1890ff'
+                        events:
+                          onClick:
+                            - id: make_pdf
+                              type: JsAction
+                              params:
+                                name: pdfMake
+                                args:
+                                  _ref:
+                                    path: inv_template.yaml
+      footer:
+        blocks:
+          - id: footer
+            type: Paragraph
+            properties:
+              type: secondary
+              content: |
+                Made by a Lowdefy 🤖

package/howto/generatePdf/my_header.html

@@ -0,0 +1 @@
+<script defer type="module" src="/public/modules/pdfMake.js"></script>

package/howto/generatePdf/public/modules/importUmd.js

@@ -0,0 +1,7 @@
+export default async (url, module = { exports: {} }) =>
+  (Function('module', 'exports', await (await fetch(url)).text()).call(
+    module,
+    module,
+    module.exports
+  ),
+  module).exports;

package/howto/generatePdf/public/modules/pdfMake.js

@@ -0,0 +1,7 @@
+import importUmd from './importUmd.js';
+import vfs from './vfs_fonts.js';
+const pdfMake = await importUmd(`https://cdn.jsdelivr.net/npm/pdfmake@0.2.2/build/pdfmake.min.js`);
+const pdfMakeFn = async (context, filename, docDefinition, tableLayouts, fonts) => {
+  await pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs).download(filename);
+};
+window.lowdefy.registerJsAction('pdfMake', pdfMakeFn);