Nesting of components

[nathalie.fijan]

Hello, I would like your ask your help regarding the nesting of components. I've found some documentation on this topic, but the part I'm struggling with is not really addressed there. The sources I've followed so far are this example on GitHub, this page in the documentation and this forum post. It seemed fairly straightforward to me at first, however the part that I can't get to work is the part where I add the component to the form. In all my attempts I can seemingly add the childcomponent to the parent (with add > component -> childcomponent), but when I do that nothing happens and nothing is added to the .frm either. At the moment we are using Servoy version 2022.3.4.

I've tried both my own component and the example component 'nestedsimplecomponent'. In each case I end up with a <svy-component-wrapper> becoming <undefined>. As suggested in the post I read I've tried editing the .frm directly and adding the component that way. The furthest I've gotten is that I could see the component in the form outline and could seemingly edit its properties, however the component either wouldn't load or would cause an error. When I tried the example component, this happened:

Code: Select all

ERROR com.servoy.j2db.util.Debug - Cannot invoke "org.sablo.specification.PropertyDescription.getType()" because the return value of "com.servoy.j2db.persistence.IChildWebObject.getPropertyDescription()" is null java.lang.NullPointerException: Cannot invoke "org.sablo.specification.PropertyDescription.getType()" because the return value of "com.servoy.j2db.persistence.IChildWebObject.getPropertyDescription()" is null

My own component appears in forms like this and works just fine:

Code: Select all

{
json:{
dataProvider:"tooltipText",
isInteractive:true,
location:{
x:1,
y:1
},
placement:"right",
theme:"default",
triggerAction:"click",
triggerElementSelector:".fa-times"
},
location:"1,1",
name:"tippytooltip",
typeName:"sam-tippytooltip",
typeid:47,
uuid:"00FCE133-E7B4-4C72-830F-5AE4BD88C6E0"
}

But when I follow the examples and try to add it to the component I want to use it in (directly via .frm), I get the following error when loading the form:

Code: Select all

ERROR com.servoy.j2db.util.Debug - Can't convert '{"definition":{"dataProvider":"tooltipText","isInteractive":true,"location":{"x":1,"y":1},"placement":"right","theme":"default","triggerAction":"click","triggerElementSelector":".fa-times"},"location":"1,1","name":"tippytooltip","svyUUID":"B92D1053-D9DB-4DD5-AED6-AC6A6ED7B869","typeName":"sam-tippytooltip","typeid":47}' from design value to a form value as type: component

I'm sure something is wrong with my .frm structure or perhaps that something is missing in my component, but I can't figure out what it is based on the available information. Could you help me figure out what it is, or is there an example available which demonstrates a fully working nested component that is used inside a form? If I need to provide any other information, let me know.

[jcompagner]

this should kind of work in NG1, but it could be that the designer has some problems with it

Problem is this is completely not supported in TiNG at this time, and i also don't see a way directly to support that, this is because the nature how components are created is completely different, its based on template/code generation and angular compiles that ahead of time... (when you are installing or updating a webpackage)

in TiNG you can nest components but only statically, so you can use servoy components (like bootstrap or servoy extra) just fine inside your own templates (just like any other 3rd party angular component) and you just have to set the right inputs in your template.
But then the parent component exactly knows what it shows and has a hardcoded template with it and has a module dependency to those components.

But dynamically that you can show any component you want and that your component package doesn't have that component as its module is i think not directly possible in Angular
Because in the end your component needs to have in its template something like <boostrapcomponents-button xxxxx> but angular then wants that bs button to be in your module structure.

Thats why FormComponent https://github.com/Servoy/servoy-eclips ... nt.ts#L174 and also ListFormComponent https://github.com/Servoy/servoy-eclips ... ent.ts#L72 have code generation parts and also the LFC references the FC to get to the templates that we generate in the FC.

But 3rd party components can't reference FC because that would cause a cycle.

So maybe in the future if this feature is really needed, we could try to figure out if we could inject something into the your component some interface where you can ask templates of component from..
but then you have to do stuff like his:
https://github.com/Servoy/servoy-eclips ... ent.ts#L62

in your own component so looping through the nestedComponents and ask getRowTemplate() for them which then ask for that inject instance this:
https://github.com/Servoy/servoy-eclips ... nt.ts#L478

to get the actual template

And then hopefully you don't need extra stuff to support responsive templates because those can only be supported currently by code generation.

[nathalie.fijan]

Hi Johan,

Thanks for your elaborate response! I understand that it is not something that is currently supported and that working around it might be possible, but would be complicated. So based on the information you provided, we've decided that it's not worth the effort it would take for the thing we're trying to achieve.