Question re app_connect custom extensions

Wappler Extensions How To
1

Hi All

Very comfortable now in the world of server connect extensions but with app connect, i crashed and burned at the first hurdle.
I just cant get any new HJSON files recognised by Wappler

In a simple example, i take the HJSON file from George's tutorial, name it "components.js" and place it in the app_connect folder

image

I have tried placing the app_connect folder in root, the extensions folder and also inside public but no matter what i do, the component never shows.
I would expect

      type: 'dmx-example-component',
      selector : 'dmx-example-component, [is=dmx-example-component]',
      groupTitle : 'Components',
      groupIcon : 'fa fa-lg fa-cube',
      title : 'Example Component: @@id@@',
      icon : 'fa fa-lg fa-cubes',
      state : 'opened',

to show a new "example component" entry in the app connect "Components" but nothing shows

image
image1010×660 43.6 KB

Probably missing something obvious can anyone assist please.

2

Hi Brian,

The App Connect components follow very strict insert rules hierarchy.

So you see only components that are allowed to be inserted based on the currently selected component.

If your component can be inserted anywhere then you have to add:

anyParent: true,

Otherwise if wont be available. The anyParent option is described in: Wappler Extensibility - Writing Custom App Connect Components and Formatters

If you want it to be available under an existing component, you can either specify it in the HJSON rules of the other component as child, or register it by name on any other parent as:

	parents: {
		'dmx-body': -1,
		'dmx-app': -1,
		'bs5-container': -1,
		'bs5-flex-container': -1
	}

where you give the other component name and a number of how many times it might be added or -1 for unlimited

I added that to the docs as well now

2 Likes
3

Added but still not seeing component

image

but after full restart

image
image1200×949 68 KB

hjson file
components.zip (1.2 KB)

4

The app_connect folder should be under extensions. Check the docs for the exact explanation specially when going to be published on npm

5

correction @Hyperbytes you can have your extension source wherever you want in your project, just make sure you create it as a new extension, like described in: Wappler Extensibility - Build Custom Wappler Extensions

then the extensions structure, package.json and components.hjson will be created for you automatically. Then you just have to fill them in and later you can also publish the extension to npm directy from there

1 Like
6

Ah, think i have it now.

Unlike server connect extensions where i can just place files in the appropriate folder and use in the development environment, you must firstly create the project from the project setup/ extensions section with App connect extensions then edit your code into the structure created by that action.
They are not just automatically found as they are in server connect

got it now

image

Off on a new adventure :smile: :smile: :smile: :smile: :smile:

3 Likes
7

Every day will be like new Year's day, waiting for Santa Brian!!!
image

2 Likes