Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
I am trying to familiarize myself with creating nebula extensions but can't figure out how to get the property panel to render. I am using the info here as my guide:https://qlik.dev/libraries-and-tools/nebulajs/in-qlik-sense
Here is my code:
const properties = {
//========================================================================
definition: {
type: 'items',
component: 'accordion',
items: {
component: 'expandable-items',
items: {
header1: {
type: 'items',
label: 'Header 1',
items: {
myText:{
ref: 'props.text',
label: 'Item 1',
type: 'string',
expression: 'optional'
}
},
},
},
},
}
//========================================================================
}
export default properties;
import {useLayout, useElement, useEffect} from '@nebula.js/stardust';
import properties from './object-properties';
export default function (galaxy) {
console.log('props',properties);
console.log('galaxy',galaxy);
return {
ext:{
properties
},
qae: {
},
component() {
const element = useElement();
const layout = useLayout();
useEffect(() => {
element.innerText= 'Refreshed: ' + new Date().toISOString()
console.log({e:element,l:layout});
})
},
};
}
Hi @devan9876 , try to build the extension and then import it into your Qlik Sense server / Desktop.
I know that runnning nebula extensions on local machine doesn't show you custom properties panel
The property panel still doesn't seem to render even when I import it into Qlik Sense Desktop.
However, the same property panel declaration works fine when I use the old method of creating extensions.
Nebula Code (Doesnt work):
export default function (galaxy) {
return {
ext:{
definition: {
type: 'items',
component: 'accordion',
items: {
section1: {
component: 'expandable-items',
label: 'Section !',
items: {
header1: {
type: 'items',
label: 'Header !',
items: {
myText: {
ref: 'props.text',
label: 'Item 1',
type: 'string',
expression: 'optional'
}
}
}
}
}
}
}
},
qae: {
},
component() {
const element = useElement();
element.innerText='hello!';
},
}
}
Old Extension Method Code (works):
define( [ "qlik"
],
function ( qlik) {
return {
definition: {
type: 'items',
component: 'accordion',
items: {
section1: {
component: 'expandable-items',
label: 'Section !',
items: {
header1: {
type: 'items',
label: 'Header !',
items: {
myText: {
ref: 'props.text',
label: 'Item 1',
type: 'string',
expression: 'optional'
}
}
}
}
}
}
},
support : {
snapshot: true,
export: true,
exportData : false
},
paint: function ($element) {
//add your rendering code here
$element.html( "hello-capabilities" );
//needed for export
return qlik.Promise.resolve();
}
};
} );
Hi @devan9876 , I can suggest to use nebula-cli for building and compiling nebula visualizations. Here how to use it. Basically, run npx '@nebula.js/cli' create "your extension name", then open the project and modify the ext.js file and insert your definition like below
export default {
definition: {
type: 'items',
component: 'accordion',
items: {
section1: {
component: 'expandable-items',
label: 'Section !',
items: {
header1: {
type: 'items',
label: 'Header !',
items: {
myText: {
ref: 'props.text',
label: 'Item 1',
type: 'string',
expression: 'optional'
}
}
}
}
}
}
},
support: {
snapshot: false,
export: true,
sharing: false,
exportData: true,
viewData: true,
},
};
Just tested your configuration and it works fine.
What happend behind the scenes when you use nebula-cli is converting modern JS into normal JS. Indeed, if we inspect compiled code, we will see the "old" definition
define((function () { 'use strict';
var ext = {
definition: {
type: 'items',
component: 'accordion',
items: {
section1: {
component: 'expandable-items',
label: 'Section !',
items: {
header1: {
type: 'items',
label: 'Header !',
items: {
myText: {
ref: 'props.text',
label: 'Item 1',
type: 'string',
expression: 'optional'
}
}
}
}
}
}
},
support: {
snapshot: false,
export: true,
sharing: false,
exportData: true,
viewData: true
}
};
return ext;
}));