Use a Ruleset from Your Software

Introduction

Great to see you're still here. Your first journey with Rulecube is almost at an end. And your last step in this tutorial is using your ruleset via its API from your software. Because, in the end, that's what it's all about: using rulesets from your web application or third-party software.

After finishing this tutorial, you'll know how to integrate a ruleset into a web page.

Use a ruleset from external software

This tutorial assumes you're familiar with JavaScript, so feel free to develop your web page solution to integrate the loan application ruleset from the previous tutorial. Or follow along with this tutorial. Either way, we encourage you to add your personal insights to explore the integration possibilities of Rulecube.

Task: Look up the JavaScript example of a ruleset

Rulecube makes your development life as easy as possible and automatically provides a JavaScript example of how to call and consume the API of each ruleset.

Open the LoanApplication ruleset and click Docs. ↳ The Documentation page opens with the Summary tab activated.
Explore the Summary tab, which gives a quick overview of a ruleset.
Click the Examples tab. ↳ Rulecube shows a fetch example for calling the ruleset via its API:

Task: build a web page that calls and consumes the ruleset

For simplicity, the following HTML file contains both HTML definitions and the corresponding JavaScript code. In real-world applications, you would probably separate the HTML and JavaScript into different files.

Create a new HTML file in your favorite code editor named CallLoanApplication.html.

Enter the following code into the file:

<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="m-5">Loan Amount Calculator</h1>
        <div class="m-5">
            <form action="javascript:calculateAmount()">
                <div class="row">
                    <div class="form-group col-6">
                        <label for="applicantname">Applicant name:</label>
                        <input type="text" class="form-control" id="applicantname">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-3">
                        <label for="dateofbirth">Date of birth:</label>
                        <input type="date" class="form-control" id="dateofbirth">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-3">
                        <label for="yearlyincome">Yearly income:</label>
                        <input type="number" class="form-control" id="yearlyincome">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Calculate loan amount</button>
            </form>
            <div class="jumbotron">
                <h4 class="ml-2 mb-3" id="overviewtitle">Overview</h4>
                <div class="col-3">
                    <label for="age">Age:</label>
                    <input type="number" class="form-control" id="age" readonly>
                </div>
                <div class="col-3">
                    <label for="maxamount">Maximum loan amount:</label>
                    <input type="number" class="form-control" id="maxamount" readonly>
                </div>
            </div>
        </div>
    </div>

    <script>
        async function calculateAmount() {
            let response = await fetch('<<Your rulecube URL>>/api/execute/ruleset', {
                method: 'POST',
                headers: {
                    "Authorization": 'YOUR_API_KEY',
                    "Content-Type": 'application/json'
                },
                body: JSON.stringify({
                    "name": "loanapplication",
                    "version": "1.0",
                    "options": {
                        "explain": false
                    },
                    "input": {
                        "LoanApplicant": {
                            "Name": document.getElementById("applicantname").value,
                            "DateOfBirth": document.getElementById("dateofbirth").value,
                            "YearlyIncome": document.getElementById("yearlyincome").value
                        }
                    }
                })
            })

            if (response.ok) {
                let result = await response.json();
                console.log('Result:', result);
                document.getElementById("overviewtitle").innerHTML = 'Overview for ' + document.getElementById("applicantname").value;
                document.getElementById("age").setAttribute('value', result.result.LoanApplicant.Age);
                document.getElementById("maxamount").setAttribute('value', result.result.LoanApplicant.MaximumLoanAmount);
            } else {
                let error = await response.text();
                console.error('Error executing:', error);
            }
        }
    </script>
</body>

</html>

⇨ Replace YOUR-API_KEY with your key.

Save the HTML file and open it in your browser. ↳ Your web page should look like this:
Enter input values into the calculator and click Calculate loan amount. ↳ The JavaScript code calls the ruleset through its API and parses the output into the web page.

Recap

You have integrated your ruleset into a web page, which brings you to the end of this tutorial.

What's next?

Excellent, you've finished the Rulecube tutorials. But the fun has only just begun. Check out the rest of Rulecube's documentation to learn more:

PreviousCreating input from JSON Schema NextRuleset Productivity Tips

Introduction

After finishing this tutorial, you'll know how to integrate a ruleset into a web page.

Use a ruleset from external software

Task: Look up the JavaScript example of a ruleset

Rulecube makes your development life as easy as possible and automatically provides a JavaScript example of how to call and consume the API of each ruleset.

Open the LoanApplication ruleset and click Docs. ↳ The Documentation page opens with the Summary tab activated.

Explore the Summary tab, which gives a quick overview of a ruleset.

Click the Examples tab. ↳ Rulecube shows a fetch example for calling the ruleset via its API:

Task: build a web page that calls and consumes the ruleset

For simplicity, the following HTML file contains both HTML definitions and the corresponding JavaScript code. In real-world applications, you would probably separate the HTML and JavaScript into different files.

Create a new HTML file in your favorite code editor named CallLoanApplication.html.

Enter the following code into the file:

<html>

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="m-5">Loan Amount Calculator</h1>
        <div class="m-5">
            <form action="javascript:calculateAmount()">
                <div class="row">
                    <div class="form-group col-6">
                        <label for="applicantname">Applicant name:</label>
                        <input type="text" class="form-control" id="applicantname">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-3">
                        <label for="dateofbirth">Date of birth:</label>
                        <input type="date" class="form-control" id="dateofbirth">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-3">
                        <label for="yearlyincome">Yearly income:</label>
                        <input type="number" class="form-control" id="yearlyincome">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Calculate loan amount</button>
            </form>
            <div class="jumbotron">
                <h4 class="ml-2 mb-3" id="overviewtitle">Overview</h4>
                <div class="col-3">
                    <label for="age">Age:</label>
                    <input type="number" class="form-control" id="age" readonly>
                </div>
                <div class="col-3">
                    <label for="maxamount">Maximum loan amount:</label>
                    <input type="number" class="form-control" id="maxamount" readonly>
                </div>
            </div>
        </div>
    </div>

    <script>
        async function calculateAmount() {
            let response = await fetch('<<Your rulecube URL>>/api/execute/ruleset', {
                method: 'POST',
                headers: {
                    "Authorization": 'YOUR_API_KEY',
                    "Content-Type": 'application/json'
                },
                body: JSON.stringify({
                    "name": "loanapplication",
                    "version": "1.0",
                    "options": {
                        "explain": false
                    },
                    "input": {
                        "LoanApplicant": {
                            "Name": document.getElementById("applicantname").value,
                            "DateOfBirth": document.getElementById("dateofbirth").value,
                            "YearlyIncome": document.getElementById("yearlyincome").value
                        }
                    }
                })
            })

            if (response.ok) {
                let result = await response.json();
                console.log('Result:', result);
                document.getElementById("overviewtitle").innerHTML = 'Overview for ' + document.getElementById("applicantname").value;
                document.getElementById("age").setAttribute('value', result.result.LoanApplicant.Age);
                document.getElementById("maxamount").setAttribute('value', result.result.LoanApplicant.MaximumLoanAmount);
            } else {
                let error = await response.text();
                console.error('Error executing:', error);
            }
        }
    </script>
</body>

</html>

⇨ Replace YOUR-API_KEY with your key.

Replace <<Your rulecube URL>> on line 51 with the base URL of your Rulecube instance. E.g. https://app.rulecube.com Explanation The code uses the framework to create a form for entering the ruleset input with an action for calling the ruleset and displaying the calculated output.

Save the HTML file and open it in your browser. ↳ Your web page should look like this:

Enter input values into the calculator and click Calculate loan amount. ↳ The JavaScript code calls the ruleset through its API and parses the output into the web page.

What's next?

Excellent, you've finished the Rulecube tutorials. But the fun has only just begun. Check out the rest of Rulecube's documentation to learn more:

Hands-on, step-by-step guides to execute specific tasks in Rulecube. Most suitable if you're trying to get something done.

A detailed explanation of Rulecube ready-to-use methods. Suitable if you need all information about a specific method to fully exploit it in functions or rules.