[New Plugin] Programmable templates

Hello Everyone,

We have just released a new plug that allow you to add programmable templates to your app. This can be used in several ways. Here are some use cases:

  • Allow the app user to create its own email templates, inserting dynamic date with the double curly brackets notation: “Hi {{first name}},…”

  • Create dynamic HTML templates that are much easier to maintain.

  • Create reports formatting data dynamically.

The plugin uses a javascript library from Adam Mark (https://github.com/adammark/Markup.js/#readme) and has powerful features, including:

  • The transformation of dynamic data with different functions (pipes)
  • Use of conditional structures within the template (IF…THEN….) - so avoiding the creation of multiple conditions in the Bubble elements, replicating the text and increasing the burden of maintenance
  • Loops within the template
    *Creation of in-template variables

The plugin can also be extended with new functions (or pipes), following the structure in GitHub page above.

We are looking forward to the contributions from the Bubble community, and will be happy to implement the new pipes (functions) that are sent through. There is an opportunity to have calculation functions for individual items and arrays, growing it into a report maker with calculations.

Well, this is intended as a community-driven plugin. Help us out.

:link: Editor: Beyondnocode-plugins-demo | Bubble Editor
:link: Preview/Demo : https://beyondnocode-plugins-demo.bubbleapps.io/version-test/programmable_templates?debug_mode=true

Elmo
Beyond Nocode

3 Likes

Hi!

I’m looking for a solution for my SaaS, where my users should be able to create a text (in this case a contract) template, where they can insert dynamic data tags. I’ll give you a contract example where the brackets should be the dynamic data the user should be able to insert in the text editor:


[Company name] at [Company adress] , hereinafter referred to as: ‘the lessor’,

and

[First name] [Last name] born on [Date of birth], hereinafter referred to as: ‘tenant’,

Have agreed:

Article 1. The rented,

The landlord rents out to the tenant the non-independent living space, hereinafter referred to as ‘the rented property’: [Street name] [House number] [Location of object], [Name of space].


Hopefully someone can help :slight_smile:

Hi Bart, our plugin does exactly that. If you insert the variables of the contract in the Data Dictionary field of the Programmable Template component and the template in the Template field, you will have the contract customized as the output. In this way, your users can use contract templates like the one above. Fields will be in double brackets.

1 Like

This seems very useful. As a suggestion, I think it would be even more useful if it came with client-side and server-side actions to process templates. So, for example, a scheduled workflow action could send out emails.

There’s a node module for the Mark.up library so it can be included in the dependencies for a server side action.

This is the tested code for a Server Side Action (SSA) that uses the template and data_dictionary parameters just as you defined them for the Element version. It also accepts two other optional parameters, for Mark.up’s includes and globals functions. Those parameters should be defined in the plugin UI as key-value parameters with text values.

It would be great if you would consider trying/implementing this! Either that or I release it as a new plugin?

function(properties, context) {
  var Mark = require('markup-js');
    
  /* properties.includes and .globals are in arrays of {"key": x, "value": y} objects, but Mark.up expects
     a simple object with key-value pairs, so we need to transform them using map-reduce.*/
  var options = {
    "includes": properties.includes.reduce((map, obj) => (map[obj.key] = obj.value, map), {}),
    "globals": properties.globals.reduce((map, obj) => (map[obj.key] = obj.value, map), {})
  }
    	
  return { 
      "result": Mark.up( properties.template , JSON.parse(properties.data_dictionary), options )
  }
}

Michael. Thx, will test including it next week

Hi @elmo.gomes ,

First of all thank you for this great plugin. We were using your plugin without any issue and suddenly it stops working. It does not produce anything anymore and the pdf generated is blank. I am wondering what might cause the issue?

Thank you

image
result is empty…not sure why. It was working before. Any clue?

Hi man,
Any update? I am stuck with your plugin.

Apologies for taking a long time. There were no changes in the plugin. I will check.

Hey there - was this ever solved? I also am seeing empty result when setting this plugin up ! I have followed your setup in the example and unfortunately cannot get the output to populate. Thanks!

Hi, can you please paste screenshots of your input?