...
In this example the PEL #{var.property.uuid} will be resolved to the UUID of the property which is about to be created when sending this output.
Form Scripting
TODO: Add final description here. See here and add parts of it to this documentation which are finalized: https://logabit.atlassian.net/wiki/spaces/DEV/pages/846233616/PRD11+-+Forms#P1:-Form-script
Internal Script
Use script as a config in form configuration.
| Code Block | ||
|---|---|---|
| ||
{
"id": "person",
"title": "person",
"public": false,
"description": "",
"schema": "$uri:property:global/app/neel/object/person/v1/schema",
"output": "$uri:property:global/app/neel/object/person/v1/instance/#{property.uuid}",
"script":{
"onload":"alert('PipeForce-neel')",
"onblur":"if (src === 'firstName') { alert(data[src]); console.log('name =>',data[src]) }"
},
"layout":{
"items":[
{
"field":"firstName"
},
{
"field":"lastName"
}
]
}
} |
External Script
Step-1: You have to define path inside script as below given example.
You will get the information about form-data, form-schema, form-layout and source from where the event is triggered below are the param names
data, schema, layout, src
data - you will get form model in JSON format
schema - you will get the form schema document in JSON format
layout - you will get then layout config in JSON format
src - it will give the form field name - for better understanding find attached video
value - it will give the current value of the element - use for onchange event only
Find the attached video for how to use script in form
...
| Code Block | ||
|---|---|---|
| ||
{
"id": "person",
"title": "person",
"public": false,
"description": "",
"schema": "$uri:property:global/app/pi-4685/object/person/v1/schema",
"output": "$uri:property:global/app/pi-4685/object/person/v1/instance/#{property.uuid}",
"script":{
"path":"$uri:property:global/app/pi-4685/form/script"
},
"layout":{
"items":[
{
"orientation":"horizontal",
"items":[
{ "field":"firstName" },
{ "field":"lastName" },
{
"field":"gender",
"class":"col col-md-5"
}
]
}
]
}
} |
Step-2: You have to define script as below example. It will support only these events and add only those events required. For this follow example 2.
| Code Block | ||
|---|---|---|
| ||
(function () {
function onload(data, schema, layout, src) {
alert('PipeForce PI-4685')
}
function onunload(data, schema, layout, src) {
alert('PipeForce PI-4685 unload')
}
function onkey(data, schema, layout, src) {
console.log('key down')
}
function onkeyup(data, schema, layout, src) {
console.log(data[src])
}
function onkeypress(data, schema, layout, src) {
console.log('key press')
}
function onchange(data, schema, layout, src,value) {
if(src == 'gender') console.log('value selecting')
}
function onsubmit(data, schema, layout, src) {
console.log('Click event')
}
function onfocus(data, schema, layout, src) {
alert('on focus')
}
// Mouse events
function onmouseoup(data, schema, layout, src) {
console.log('mouse up')
}
function onmousemove(data, schema, layout, src) {
console.log('mouse move')
}
function onmouseover(data, schema, layout, src) {
alert('mouse over')
}
function onmouseout(data, schema, layout, src) {
console.log('mouse out')
}
function onscroll(data, schema, layout, src) {
console.log('scrolling')
}
function onresize(data, schema, layout, src) {
console.log('resized')
}
return {
onload,onunload,onchange,onfocus,onkey,onkeyup,onkeypress,onscroll, onresize,
onsubmit, onmouseup, onmousemove, onmouseover, onmouseout
};
})() |
Example 2
| Code Block | ||
|---|---|---|
| ||
(function () {
function onload(data, schema, layout, src) {
// Add your code here.
}
function onchange(data, schema, layout, src,value) {
// Add your code here.
}
return { onload, onchange }
})() |
...
| Code Block | ||
|---|---|---|
| ||
(function () {
function onchange(data, schema, layout, src,value) {
pi.pipeline('iam.group.members?name=ALs').then((res)=>{
debugger
})
}
return { onchange }
})() |
https://quasar.dev/vue-components/select#qselect-api
https://quasar.dev/vue-components/input#qinput-api