Overview

ExpressionBuilder is UI component to create a input for arithmetic expressions with functiuons and intellisense

Features

  • Support common mathematic operators, variables (or properties), strings and functions
  • Expression validation and parser
  • Responsive Bootstrap theme

Expressions samples

Arithmetic expressions

  • 23 + 12
  • (12 / 2) + 4
  • (150 * (25 - 5)) / (-5 * -6)

Advanced expressions

  • 10 - var1
  • (grade * 100) / average
  • Add(10, 15) / Sub(10, 5)
  • Substring("Hello World!", 6)

Installation

Include the Javascript and Stylesheet files in the head of your page as following:

  <!--Head contents-->
  <link rel="stylesheet" href="https://exp.js.org/src/expression-builder.css" />

  <!--<script src="jquery.js"></script>-->
  <script src="https://exp.js.org/src/expression-builder-v2.js"></script>
  

Usage

Basic use

The fundamental use of the ExpressionBuilder could be just enabling a validation on the user input. fisrt we need to have a input:

  <input type="text" id="txt" />
  

To setup the besic functionality, use the following javascript code:

  let expBuilder = $('#txt').expressionBuilder();

  //validate the expression
  let isExpressionValid = expBuilder.isValid();

  //get expression
  let exp = expBuilder.getExpression();
  

See the besic demo here

Options

Name Type Default Description
variables object[] Array of available variables to suggest while user is typing in the expression. See below
expression string '' Initial expression to be set into the input while generating the expression builder
preventWrongInput boolean false Helps the user to input the expression easily by preventing to input wrong caracters (limits some correct expressions to input)
functions object {} A json object with desired fuctions to support in the expression. See below
suggestions 'up'|'down' 'down' Suggestion position when the user is searching a variable or function

Variables

Property Type Description
variableId number|string It will be replace with the variable name in a bracket liek [32], to avoid any error make sure to have a unique id for each variable
name string Searchable variable name
value any To compute the expression and get the result you can pass value to each variable

ExpressionBuilder will suggest the available variables while the user is typing part of the variable name and will replace the variable Id in a bracket as the result. See the following example:

  var options = {
    varaibles: [
      {
        variableId: 1,
        name: 'FirstName'
      },
      {
        variableId: 2,
        name: 'Age'
      }
    ]
  };
  var expBuilder = $('#txt').expressionBuilder(options);

  //input: Age + 3
  var expResult = expBuilder.getExpression();

  //expResult: [2]+3
  

If the varaiable name starts with a digit expressionBuilder will wrap it in brackets or user should type it in brackets like: [1_name] + " " + LastName

See the varaible demo here

Functions

This is a flexible object you can add to expressionBuidler to support as part of the expression. Not only it will suggest it while user is typing a part of the function name, but also it shows the function signature to help user to avoid wrong syntaxes. Also, expresssionBuilder will use the same function when you run the expression.

In the following example we define to simple Add and Sub function to the expressionBuilder and you can see the runing example in the demo page.

  var options = {
    functions: {
      Add: function (x, y) {
        return x + y;
      },
      Sub: function (x, y) {
        return x - y;
      }
    }
  };
  var expBuilder = $('#txt').expressionBuilder(options);

  //valid input: Add(2, 3)