Bridging JS and C2

2

Stats

6,068 visits, 8,661 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 24 Jul, 2014. Last updated 19 Feb, 2019

History & Introduction

C2's JavaScript SDK was the only way to run your custom JS codes and reflect the changes in C2. Although it's well documented and relatively easy to learn, I guess, it is not everyone's cup of tea. It still requires some level of coding and a lot of works.

However, with the introduction of c2_callFunction in C2 version 175, integration of custom JS codes with C2 is never been that easier.

So, I decided to share how we can easily bridge calls between JS codes and C2's Function.

Tutorial

Here you will learn, how we can do a two-ways communication (from C2 to JS and JS to C2) and the usage.

To call JS from C2, there are a number ways. The easiest way would be the use of "Browser" object's "Execute Javascript" action. Since, it is not a new object or action, I will not make any explanation here.

The most excited part is to call/update C2 from JS. We can now use "c2_callFunction" form our JavaScript codes to call a Function inside C2 and pass parameters (texts or numbers only). Before you can use "c2_callFunction", you must first add "Function" object.

Usage:

c2_callFunction("C2 Function Name", ParameterArray)

Example:

c2_callFunction("UpdateText", ["Updated From Browser!"]);

Demo

JS <--> C2 Example

Demo Download

Real Life Usage Example

There are a ton of useful and well-tested JS scripts out there which we can just use them. In this example, we will try to remove HTML tags from a text. To implement this logic and function in C2, we might need to create a complex eventsheet or create a plugin of our own. However, by using c2_callFunction, we can just have the functionality with a few lines of code.

Check intex.html and look for this script.

Example Download

This is my FIRST tutorial and hope it's helpful and useful!

Cheers! ^.^

  • 0 Comments

Want to leave a comment? Login or Register an account!