How to develop custom components for Vue-low-code？

[konglinghai123]

I already know how to design my application through quant UX, but I want to add my components to quant UX. I guess I want to complete the following：

1. Develop a component (type: a) in quant UX project.

2. A component (type: a) is also developed in the Vue low code project.

Could you please provide some detailed documentation？

[KlausSchaefers]

Hi,

this is a bit tricky:

1) In Quant-UX you need to create a custom component.

• In create a component in the https://github.com/KlausSchaefers/quant-ux/tree/master/src/core/widgets folder
• Quant-UX has it's own lifecycle and your component needs to implement the methods render, resize etc.
• Best is to extend UIWidget and DojoWidget, take a look here: https://github.com/KlausSchaefers/quant-ux/blob/master/src/core/widgets/IconButton.vue.
• Because of the legacy of dojo, most widgets construct the DOM in vanilla JS. You can also use VUE, this might be a little slower.
• You need to create a "createXXX" in the RenderFactory: https://github.com/KlausSchaefers/quant-ux/blob/master/src/core/RenderFactory.js
• You need to create a template, e.g. https://github.com/KlausSchaefers/quant-ux/blob/master/src/themes/wireframe/camera.json
• You need to register the template in the SymbolService https://github.com/KlausSchaefers/quant-ux/blob/master/src/services/SymbolService.js
• You need to customise the properties panel, e.g. to configure which properties to show: https://github.com/KlausSchaefers/quant-ux/blob/master/src/canvas/toolbar/mixins/_Render.vue
• If you need custom properties, you need to implement a "showXXX" method in the data section: https://github.com/KlausSchaefers/quant-ux/blob/master/src/canvas/toolbar/components/DataSection.vue
• Vue widgets can also replay state (for the screen recordings. You need to emit this changes during simulation and during play back you need to react to them. This might be tricky, take a look at the type ahead (https://github.com/KlausSchaefers/quant-ux/blob/master/src/core/widgets/TypeAheadTextBox.vue). You need for instance to emit when a popup is opened and also when inout is entered. If you do not need Replay, for get this for now.

Here is more info: https://quant-ux.com/#/opensource.html

2) In VUE-LOW-CODE it is easier.

• Just create the same widget as pure VUE. Place it in web https://github.com/KlausSchaefers/vue-low-code/tree/master/src/qux/web
• Best extend _Base, Take a look here https://github.com/KlausSchaefers/vue-low-code/blob/master/src/qux/web/IconToggle.vue
• You need to register in index.js https://github.com/KlausSchaefers/vue-low-code/blob/master/src/qux/index.js
• If you need custom CSS, create a custom CSS factory like this one: https://github.com/KlausSchaefers/vue-low-code/blob/master/src/qux/web/css/PagingCSS.js
• Register it in the CSS Factory: https://github.com/KlausSchaefers/vue-low-code/blob/master/src/qux/web/css/CSSWidgetFactory.js

If you manage to use a VUE template, you should be able to copy most of the widget.

[KlausSchaefers]

What Kind of component do you want to build?

[konglinghai123]

I want to define very complex components, such as complex and beautiful page.

[KlausSchaefers]

Hi, for this you could also try to use just the normal templating system. You could just create a new template file and create a group element. Take a look here:

https://github.com/KlausSchaefers/quant-ux/blob/master/src/themes/lightning/modal.json

This is a modal dialog with some constraints in it, so it behaves responsive.

[KlausSchaefers]

These template groups are build of simple components that are already supported in Vue-Low-Code

[konglinghai123]

In my case, my application page UI/UX design is defined on Quant-UX. Users can modify or add new pages through Quant-UX. Can this requirement be realized?

[KlausSchaefers]

Yes that should be possible. You can also define screens as templates.

[konglinghai123]

How to define screens as templates. Could you please give me some guidance?

[KlausSchaefers]

Hi, I just checked. I still need to fix some stuff in quant-ux for this. Should not take long.

[konglinghai123]

Looking forward to the new features of the project, don't forget to tell me.Thank you!

[KlausSchaefers]

Hi,

can you checkout at latest version of Quant-UX. It should support now screens with widgets. You need to

1) Create a template file. Here is an example https://github.com/KlausSchaefers/quant-ux/blob/master/src/themes/screensAndWidgets.json

2) Register the template file in the SymbolService: https://github.com/KlausSchaefers/quant-ux/blob/master/src/services/SymbolService.js

3) If you want to add new categories or change the size of the preview take a look at https://github.com/KlausSchaefers/quant-ux/blob/master/src/canvas/toolbar/components/CreateButton.vue

You can get the JSON for the template file by enabling "Ninja" mode..

1) Double click on the toolbar,

2)Select the screen

3) Click the Ninja Icon

4) Copy JSON

You might notice this is the same structure as the default app JSON. You could also dev tools to check the rest requests.

Does this help?

[konglinghai123]

My idea is to define all the screens of my application in quant UX, and I can let my users modify my application page. But this screen with widgets function doesn't seem to be satisfied, right? I'm not sure?

[KlausSchaefers]

If you use this mechanism, the screens will appear in the widget creation dialog. If you want to start with a set of screens the best would be to just create the prototypes and then us the the saveAs functionality to create a copy. If this does not help, could you explain your use case in more detail? Which are the steps you want your users to take?