html form inject webix ui afterrender

Dear Webix Team,

i have a problem when injecting webix ui component into htmlform view.
i have a code like this.

const formTemplate2 = 
    		"<div id=\"template_form-template\"></div><div class=\"dvPrvw\">" + 
    		    "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" class=\"tbPrvw\" >" + 
    		      "<tr>" + 
    		        "<td width=\"15%\" class=\"clbl\"><label for=\"country_code\">Country Code</label></td>" + 
    		        "<td class=\"cinp\" ><div id=\"country_code\"></div></td>" + 
    		      "</tr>" + 
    		      "<tr>" + 
    		        "<td class=\"clbl\"><label for=\"description\">Description</label></td>" + 
    		        "<td colspan=\"3\" class=\"cinp\"><div id=\"description\"></div></td>" + 
    		      "</tr>" + 
    		    "</table>" +
    	    "</div>";
    	
    	var form = {
    			id: "template_form", css: "content-form", active: false,
    			view: "htmlform", template: formTemplate2, //content.template,
    			on: {
    				'onAfterRender': function() {
    					webix.ui({ id: "country_code", name: "country_code", container: "country_code", view: "text", type: "text", width: 150, required: true });
    					webix.ui({ id: "description", name: "description", container: "description", view: "textarea", height: 100, width: 150, required: true, readonly: true /*, value: "haha huhu"*/ });
    				}
    			}
    	};

when i inspect webix html form element in browser inspection for example $$("template_form").elements;
I just have one elements inside template_form that is webix ui description (textarea). Country code UI didnt insert into template_form element but if i change the view type of country code into textarea, that view inserted/appear in template_form elements.

Is this some of webix problem or i use wrong method ?

I hope webix team can give me explanation about this.

here the example in JSFIDLE
http://jsfiddle.net/irvan_pradivta/gakr0jgh/1/

I hope webix team can help me to figgure out this problem.

Hello!
Please, can you describe the reason, why you want to use htmlform instead of form?
Here is an example of form: https://webix.com/snippet/43c3607c
Because usually htmlform is used with html inputs, at the same time <a href = "https://docs.webix.com/api__refs__ui.form.html">ui.form</a> is used for webix controls. If you want to insert any html content in addition to webix controls in form please use <a href ="https://docs.webix.com/desktop__template.html">template</a>.

Dear Nastja,

Thank you for you answer.
My Reason to use htmlform like in this link Webix - JSFiddle - Code Playground
is i want to attach webix view to container in html that i build so i can layout the form layout from html layout that i create.
From my example i can inject the webix view into htmlform with afterrender event but the problem is only view textarea that can be insert into element so when i try to set values for the form only textarea view that can retrieve the value, other webix input element cannot get the value. you can see in my example bellow.

my question, is there any method that i can push html layout that i create into webix view and then inject the webix input (text, textarea, datepicker, etc) into html container for each column with webix view ?

The point is that the Webix ui.htmlform is intended to contain only HTML inputs.
Unfortunately, there’s no way to provide exactly the same features for both Webix controls and regular HTML inputs in one container, and that is the reason for dividing the ui.form and ui.htmlform components.

Thus, please consider the simpler scenarios:

  • to use Webix controls in HTML container, initialize a ui.form in a separate webix.ui and set the needed container (snippet)
  • to use the plain HTML inputs within the Webix UI, please use htmlform (snippet)
  • if for some reason you need to use both options in one UI, please divide the form from htmlform and use one of the options mentioned above

Dear Listopad,

Thank you for your respons.
If i use your solution to use ui.form, is there any method to layout the webix components inside ui.form using html container ?

Dear Listopad,

If you look at my example, why view text area can have a value using form.setvalues() ?

If only text area that can have a value, is it a bug from webix ?

It is not a bug.
htmlform is not intended to work with Webix controls in any way.

As textarea is not an input-based component (it has its own tag in HTML), a ui.textarea in Webix has a rendering process that is different from other inputs, so it appears that name is also included as an html attribute in the node.
We consider this peculiarity as a minor bug and will remove the name from the ui.textarea node.

As you can see from the documentation, htmlform requires a name attribute in html inputs to work with these inputs in the same way as ui.form works with Webix controls via name property.

is there any method to layout the webix components inside ui.form using html container

No. As far as I can see, the idea itself does not correspond to the UI architecture offered by Webix layouts. If you intend this as a way to align the controls in the form, please note that the form can contain the UI of any complexity as well as layout.

Also, can you please clarify in detail, is the initial structure from your jsfiddle snippet provides any advantage in contrast to the suggested solution?
From our experience, there’s no any obvious reason to create such complex structure while there’s a possibility to init and arrange all components in Webix layout.

Dear Listopad,

Thank you for your response.

The reason why i use form architecture like that is i want to create internal framework that can generate form using webix ui form component with only plain HTML div tag. In my backend i have create a procedure that give a response JSON config for column. For the layout i dont want to create layout manually just like you said before using webix form (layout use rows and cols inside webix form). For the layout i want to make it simple with only HTML div tag that will push into webix component (htmlform) after that in my procedure i just inject webix ui component into HTML div tag that i have push. So in the next development other engineer dont have to make form layout manually using webix form.

I know this method is not common but from my research this method is the fast way for my team development to build a form.

Anyway thank you for all of your response.
Finally i create my own procedure to inject value into webix ui inside htmlform. So i didnt use standard method that provided by webix.

Regards,
Irvan

As a side note, please pay attention that Webix layout can be rebuilt (and receive the configuration from the server as well) as described in the related documentation chapter