topic Nebula extension property panel not rendering in Integration, Extension & APIs

Nebula extension property panel not rendering

devan9876 — Mon, 01 Aug 2022 02:11:51 GMT

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}); }) }, }; }

Nebula Dev Hub

Re: Nebula extension property panel not rendering

alex_colombo — Mon, 07 Nov 2022 16:04:00 GMT

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

Re: Nebula extension property panel not rendering

devan9876 — Sat, 19 Nov 2022 17:18:14 GMT

@alex_colombo

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(); } }; } );

Re: Nebula extension property panel not rendering

alex_colombo — Mon, 21 Nov 2022 16:35:28 GMT

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; }));