Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

Announcements
Qlik Open Lakehouse is Now Generally Available! Discover the key highlights and partner resources here.
cancel
Showing results for 
Search instead for 
Did you mean: 
devan9876
Creator
Creator

Nebula extension property panel not rendering

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 HubNebula Dev Hub

Labels (2)
3 Replies
alex_colombo
Employee
Employee

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
Creator
Creator
Author

@alex_colombo 

The property panel still doesn't seem to render even when I import it into Qlik Sense Desktop.

Capture.PNG

 

However, the same property panel declaration works fine when I use the old method of creating extensions.

Capture.PNG

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
Employee
Employee

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.

alex_colombo_0-1669048336966.png

 

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;

}));