Nebula extension property panel not rendering

[devan9876]

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

[alex_colombo]

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

[devan9876]

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

} );

[alex_colombo]

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;

}));