html markup initialization

I am migrating a form that retrieves its config object from an angular controller (the config object includes 4 form components, organized on two rows, two components per row)

<div webix-ui="formConfig"></div>

to one which components are defined in html and still retrieve their config object from the controller

<div data-view="form" data-id="myHtmlForm">
    <div data-view="rows">
        <div data-view="cols">
            <div webix-ui="perfilNameTextConfig"></div>
            <div webix-ui="cloneablePerfilesComboConfig" 
webix-data="cloneablePerfiles"></div>
        </div>
        <div data-view="cols">
            <div webix-ui="clearCreatePerfilButtonConfig"></div>
            <div webix-ui="createPerfilButtonConfig"></div>
        </div>
    </div>
</div>

At the moment both forms live on the same page. All is good except for the fact the latter form is showing all 4 components each on a separate row (cols are being ignored.)

I am mixing up incompatible initialization styles here?

ok thanks I see what you mean. A new snippet shows what I am really trying to achieve - evolve an entirely js-based form to an html-based one, without changing the rendered output. The move is mainly to take advantage of webix-data and angular. Would you please take a look http://webix.com/snippet/283b730f (there are comments on the html)

The all-in-one-contructor approach does not bode well with the angular/webix-data paradigm and I would like to find out if rendering can be fixed by tweaking some visualization attributes here and there.

Thanks for your patience.

Hello,

(1) As to the problem with auto adjustment, you should be aware of the fact that Webix adjustment rules work only if your app is initialized with one and the same webix.ui constructor.

The webix-ui tag not only gets configuration from the controller, but executes a separate webix.ui call and initializes the component in the given HTML block.

If you can, you should avoid such code patterns. You should initialize the whole app either from config or from markup.

(2) You need to call .show() method for the window to show it on the page. You can do it with webix-ready directive:

<div webix-ui webix-ready="showWindow(root)" view="window" >

where root keyword acts as this pointer and showWindow() is a controller method:

$scope.showWindow = function(window){ 
    window.show();
  }

Please, check: http://webix.com/snippet/fb2663a6

Nested layouts works well itself :

http://webix.com/snippet/8e2c8b3a

But most probably the problem is in the structure of the html-markups: a separate webix.ui (formConfig in your case) should be initialized completely as JSON or as html without calling another webix.ui within it.

Ok so I have abandoned the data- attribute approach:

<div webix-ui="formConfig"></div>
<div webix-ui view="form" id="htmlForm">
    <div view="rows">
        <div view="cols" >
            <div webix-ui="perfilNameTextConfig" ></div>
            <div webix-ui="cloneablePerfilesComboConfig" webix-data="cloneablePerfiles" ></div>
            <div webix-ui="clearCreatePerfilButtonConfig" ></div>
        </div>
        <div view="cols" >
            <div webix-ui="createPerfilButtonConfig"></div>
        </div>
    </div>
</div>

<div webix-ui view="window" id="htmlWindow" modal="true" height="900" width="1000" position="center" move="true">
    <div view="head">
        <div view="toolbar" margin="-4" stack="cols">
            <div view="label" label="{{vm.translations.NameLabel}}"></div>
            <div view="icon" icon="times-circle" click="hideHtmlWindow()"></div>
        </div>
    </div>
    <div view="body">
        <div view="rows">
            <div view="cols">
                <div webix-ui="perfilNameTextConfigW"></div>
                <div webix-ui="cloneablePerfilesComboConfigW" webix-data="cloneablePerfiles"></div>
                <div webix-ui="clearCreatePerfilButtonConfigW"></div>
            </div>
        </div>
    </div>
</div>

webix-ui=“formConfig” is my original form which components adjust just fine:

        function configureForm() {
            $scope.formConfig = {
                view: "form",
                id: "originalForm",
                elements: [
                    {
                        cols: [
                            { id: "perfilName", view: "text", label: vm.translations.NameLabel },
                            {
                                view: "combo",
                                id: 'cloneablePerfiles',
                                label: vm.translations.cloneFromPerfilButton,
                                options: $scope.cloneablePerfiles
                            },
                            { view: "button", type: "icon", icon: "refresh", click: clearCreatePerfilForm }
                        ]
                    },
                    {
                        cols: [
                             { image: "/images/imagenes_aplicacion/Guardar.png", view: "button", type: "imageTop", label: vm.translations.createPerfilButton, click: createPerfil }
                        ]
                    }
                ]
            };
        }

webix-ui view=“form” id=“htmlForm” is my target form, it shows its components BUT the rows do not auto adjust their height to the minimum required, and borders are displayed. How can I define “htmlForm” to show exactly the same as “originalForm”?

Also, all 3 components in the popup window have 0 width when shown, how do I define the window body content in html?

Many Thanks

Tweaking visualization attributes will require a lot of patience from you, I’m afraid, as you will need to set fixed sizes as well as remove borders, padding or change layout type here and there. And you will loose auto adjustment on window resize.

However, here’s the snippet: http://webix.com/snippet/5511d766

Still, consider the possibility of configuring the UI in markup and defining data and logic in the controller: http://webix.com/snippet/16eb41a3

appreciate your insight - I have settled with markup initialization and have questions - http://forum.webix.com/discussion/7287/html-markup-initialization-of-form-controls#latest