docMaker User guide
  • 👋Welcome to docMaker
  • Features
    • Create pdf from docx template
      • 🏗️Build your docx template
        • Overview
        • Text substitution
        • Images
        • Conditions
        • Loops
          • Simple list
          • List with multiple values
          • Adding rows into a table
          • Loops in columns + lines (grids)
          • Nested loops
        • QR codes
        • Rich text & html
      • ⚙️docx_fill_convert API parameters
    • Fill-out pdf forms
      • 🔧Build your pdf form
      • ⚙️pdf_fill API parameters
    • Print web page to pdf
      • ⚙️page_pdf API parameters
  • INTEGRATIONS
    • Typeform
      • Create pdf or docx for each Typeform response
    • Bubble.io
      • 📝Easy pdf from docx template
      • 📋Fill-out pdf forms
      • 🖥️Webpage to pdf
    • Make.com
    • Coda
    • Xano
    • Zapier
    • API
  • FAQ
    • 🫧Bubble.io questions
    • 📄Questions on docx templates
    • 📙Questions on pdf templates
Powered by GitBook
On this page
  1. Features
  2. Create pdf from docx template
  3. Build your docx template
  4. Loops

Loops in columns + lines (grids)

If you have a list of items which you want to display in multiple columns and multiple lines, you may use our columns features.

The beauty of it, is that page numbers will increment automatically, and page breaks will be perfectly fitted !

Example data :

{"images": [
 {
   "title": "Shirt",
   "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjHWwPvOYKj1hg5y1UdGQw1RbG9HpKwpOZmw&s",
   "description" : "red, long sleeves"
 },
 {
   "title": "Dress",
   "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjHWwPvOYKj1hg5y1UdGQw1RbG9HpKwpOZmw&s",
   "description" : "blue and green"
 },
 {
   "title": "trousers",
   "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjHWwPvOYKj1hg5y1UdGQw1RbG9HpKwpOZmw&s",
   "description" : "blue jeans"
 }
]
}

In your template, you have to add Col1, Col2, Col3 to each one of your variables, as shown below:

{#images}{%imageCol1}

{titleCol1}

{descriptionCol1}

{%imageCol2}

{titleCol2}

{descriptionCol2}

{%imageCol3}

{titleCol3}

{descriptionCol3}{/images}

Template

Result

PreviousAdding rows into a tableNextNested loops

Last updated 7 months ago

And in addition to that you have to provide the number of columns in the plugin JSON data, like this: "images.nbColumns" :3, Then just create your JSON loop as usual. You can see a demo on this page : Editor:

🏗️
https://docxtopdfplugintest.bubbleapps.io/version-test/image_loop?debug_mode=true
https://bubble.io/page?type=page&name=image_loop&id=docxtopdfplugintest&tab=tabs-2
➡️