Businesslogic

A small javascript library for creating interactive content and decisioning automation using businesslogic.online webservices.

---

Use cases

Whenever you need interactive content, calculations or decisioning logic:

• Build an online calculator that takes inputs and converts them into outputs without revealing the logic.
• Create a pricing tool for your sales force without giving access to the underlying logic.
• Publish a public poll to provide custom insights to users based on your decisioning model.
• Convert a static consulting analysis into a dynamic charts and visualisations for your clients.
• More use cases here...

---

How to use?

Businesslogic library is intended to be used in three ways:

1. Create auto-generated webforms
2. Create webforms based on a template
3. Use businesslogic programmatically

Please note: It is possible to combine these approaches and to make different webforms and businesslogic webservices to interconnect and to communicate with each other or to communicate with other external services, plugins and libraries.

---

Auto-generated webforms

Create a businesslogic driven webform with only a few lines of code and your own webservice token bl-token="[your-businesslogic-webservice-token]".

<script type="module" src="https://lib.businesslogic.online/js/businesslogic.latest.js"></script>
<link rel="stylesheet" href="https://lib.businesslogic.online/js/businesslogic-standard-theme.css">
<div bl-token="cf4c7b6555db4c98bda752f750e2684f" bl-name="calc" bl-auto class="bl-theme bl-theme-fonts"></div>

Including it anywhere on your page will generate a form like the following example. See a live example here.

Auto-generated webform in sleek mode, just add bl-auto-sleek attribute and bl-background-image in order to add background image

<div bl-name="calc2" bl-token="5009a8b8529d4c059560a863f8904e31" bl-auto-sleek bl-control-reset-label
     class="bl-theme bl-theme-fonts bl-grid-columns-sleek" bl-control-submit-label="Submit"
     bl-background-image="https://images.unsplash.com/photo-1614059632169-522876ce04c8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMDE5OXwwfDF8Y29sbGVjdGlvbnwxfEtYRUFnWFJoeHRFfHx8fHx8fDE2Mjg1NjkwNTY&ixlib=rb-1.2.1&q=80&w=1080">
</div>

Use our styling guidelines to achieve your unique look.

Please note: Auto-generated forms are also accessible programmatically.

---

Webforms based on a template

Wire your own webform template with businesslogic. In this cases businesslogic uses it as a template.

<script type="module" src="https://lib.businesslogic.online/js/businesslogic.latest.js"></script>
<link rel="stylesheet" href="https://lib.businesslogic.online/js/businesslogic-standard-theme.css">

<!-- Your own webform -->
<div bl-token="cf4c7b6555db4c98bda752f750e2684f" bl-name="calc" class="bl-theme bl-theme-fonts">
  <div class="input-group">
    <div class="form-group">
      <label bl-input-label="salary_per_month" for="salary_per_month"></label>
      <input bl-input="salary_per_month" id="salary_per_month" type="number" class="form-control" >
      <small bl-input-description="salary_per_month"></small>
      <small bl-input-error="salary_per_month"></small>
    </div>
  </div>
  <div class="input-group">
    <div class="form-group">
      <label bl-input-label="start_year" for="start_year"></label>
      <select bl-input="start_year" id="start_year" class="form-control">
        <option selected bl-placeholder>Choose...</option>
      </select>
        <small bl-input-description="start_year"></small>
        <small bl-input-error="start_year"></small>
    </div>
  </div>
  <hr>
  <button bl-control="submit">Calculate</button>
  <hr>
  <p><span bl-output-label="total_amount"></span> is: <span bl-output="total_amount"></span></p>
</div>

This will generate a form like the following example. See a live example here.

Use our styling guidelines to achieve your unique look.

Please note: Webforms created this way are also accessible programmatically.

A combination of templating and a programatic approach can be used to extend templates with rich visuals, like charts, using charting libraries. See a live example here.

---

Use businesslogic programmatically

Here is an example how you can use it directly on the page using code.

Use the library on a webpage

Use businesslogic library to connect and to execute functionality in your businesslogic webservice. See a live example here.

<script type="module" src="https://lib.businesslogic.online/js/businesslogic.latest.js"></script>
<script>
  window.onload = function () {
  
    // You can execute a webservice using Webservice class
    
    var biz = new Businesslogic.Webservice('cf4c7b6555db4c98bda752f750e2684f');
    biz.setParams({ "goal": 10000, "deadline": 2019 });
    biz.setParam("goal", 10000);

    biz.execute().then(function (result) {
        console.log('Output from programmatic execution: ',result)
    }).catch(function (error) {
        console.log('Error in programmatic execution: ',error)
    });
  };
</script>

You are able to get and manipulate with any webservice from the collection.

<script type="module" src="https://lib.businesslogic.online/js/businesslogic.latest.js"></script>
<script>
  window.onload = function () {
    
    var biz = new Businesslogic.Webservice('cf4c7b6555db4c98bda752f750e2684f');
    
    Businesslogic.Webservices.get('cf4c7b6555db4c98bda752f750e2684f').setParams({ "goal": 15000, "deadline": 2019 });
    Businesslogic.Webservices.get('cf4c7b6555db4c98bda752f750e2684f').setParam("goal", 10000);
    Businesslogic.Webservices.get('cf4c7b6555db4c98bda752f750e2684f').execute();
  };
</script>

In this way you can interconnect several webservices together or to enrich their functionality using external ressources.

Use the library in development environment

Install businesslogic library using npm:

npm install businesslogic

Use it in the code like so:

var Businesslogic = require('Businesslogic');

var biz = new Businesslogic.Webservice('cf4c7b6555db4c98bda752f750e2684f');
biz.setParams({ "goal": 10000, "deadline": 2019 });

biz.execute().then(function (result) {
    console.log('Output from programmatic execution: ',result)
}).catch(function (error) {
    console.log('Error in programmatic execution: ',error)
});

---

Contributing

In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

• Clone or fork this repository
• Make sure you have node.js installed
• run npm install -g webpack webpack-dev-server typescript to install global dependencies
• run npm install to install dependencies
• run npm start to fire up dev server
• open browser to http://localhost:8080