Documentation
Main site
Searchβ¦
π
Overview
π
Platform Features
Getting started
Login and Signup
App management
π¨π
Learning Directual
Data
Data structures
Data types
Directual Query Language (DQL)
Import and export
File storage
Template system
Principles of templating
Coding mode (evaluating as a JS-expression)
Comparison component
Tips for dealing with data
Scenarios
Principles of Directual scenarios
Event-driven triggers
Schedule triggers
Synchronic scenarios
Editing scenarios
Using variables
Testing and debugging
System scenarios
Advanced scenario settings
API and integraions
WebSocket API (Socket.IO)
API-endpoints (Security Layer)
Webhooks
Other integrations
Authentication API
Security features
App interface
Options for building an app interface
Web-page builder
Teams
Teams
Sandbox apps
Plugins
π
Using plugins
πͺ
Developing plugins
Developing Scenario plugins
Developing Web-plugins
Example: use chart.js in Directual
Example: build simple form
JavaScript SDK
Directual JavaScript SDK basics
Internal $D methods
Work with Google Sheets
JS SDK examples
Directual π React JS
Directual + React JS
Pricing and billing
π³
How billing works
π
Promo-codes
App plans
Team plans
On-demand resource consumption
π€
Affiliate programme
Security and stability
π‘
Public Cloud
Support
π¬
Contact Directual
Directual step-by-step
Public Development Roadmap
Weather Forecast app
Powered By
GitBook
Developing Web-plugins
Field description
Field
Description
Parameters/
JS libraries
URL to js file, which loaded on your page. For example: jquery lib, graph lib and e.t.c.
General/
shared parameters
Parameters are available on scripts, filled on only install plugin.
Web-components/step/
Initialize
Initialize scrip
t: code script run with first load page. You could create/change DOM, write loading message and e.t.c.
Web-components/step/
Update
Update script
: ran when all data is loaded, and DOM is complete.
β
β
Creating "hello world" plugin!
Preparing
1.
Adding plugin to your application, for this, please go to the section "Status and actions" and enter you app sys name to the form.
β
β
Image above is an example: i added my applicaion
evp
and now, i could see my plugin in my app!
β
2. Install you plugin in your app:
β
β
3. Insert your plugin to you web-page for debugging:
β
β
β
Writing first plugin
Now, we a ready for writing the first plugin:
Insert next code to initializate block:
function(instance, context) {
β
div = $('<div id="myDiv">loading...</div>');
div.css('width', '300px');
div.css('height', '300px');
div.css('background', 'red');
div.css('color', '#FFF');
β
instance.canvas.append(div);
β
}
and refresh you page, you must looked see:
β
β
β
Insert to the update section next code:
function(instance, properties, context) {
β
var ctx = $("#myDiv")
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")
β
ctx.text("test")
β
}
and you look image as this:
β
β
You could running any js code in update section, also you have access to variables to parameters.
Example: you have component params with name: test.
And you set it parameter as "World"
β
β
β
and if you changed you script:
function(instance, properties, context) {
β
var ctx = $("#myDiv")
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")
ctx.text(context.name)
β
}
you will see parameter on you page.
β
β
β
Previous
Developing Scenario plugins
Next
Example: use chart.js in Directual
Last modified
1mo ago
Copy link
Outline
Field description
Creating "hello world" plugin!
Preparing
Writing first plugin