Load extenal JS-ui in Window

Site and Services
#1

Hello, how do you design a layout to load a UI external?

index.html

`webix.ui({ view:"window", height:250, width:300, left:50, top:50, move:true, resize: true, head:"This window can be resized", body:{ template: "content.js" } }).show();

`

content.js

`webix.ui({ view:"toolbar", height: 65, cols: [ { view:"button", type: "htmlbutton", css: "icon_back_btn", label: 'Back', inputWidth:100}, { view:"button", value: "New Color", inputWidth:100, css:"bt_1"}, { view:"button", type: "htmlbutton", css: "icon_btn", label: '

Icon Button
', inputWidth:100}, { view:"button", type: "htmlbutton", css: "image_btn", label: '
Image
', inputWidth:100} ] })

`

Version 1:

`body : webix.ajax('content.js').then(function(resp) { } )

`

Version 2:

`{view:"template", src:"content.js"}

`

nothing works, comes only via play text :frowning:

best regards
Volk3r
PS: Sorry My English is Translate xD

#2

Sorry the code formatting was missing for the forum, have Edit

#3

Hey Volk3r, have you tried setting the body of your window directly to your view from content.js?
For example:

export const toolbar = webix.ui({
  view:"toolbar",
  height: 65,
  cols: [
    { view:"button", type: "htmlbutton", css: "icon_back_btn", label: 'Back', inputWidth:100},
    { view:"button", value: "New Color", inputWidth:100, css:"bt_1"},
    { view:"button", type: "htmlbutton", css: "icon_btn", label: 'Icon Button', inputWidth:100},
    { view:"button", type: "htmlbutton", css: "image_btn", label: 'Image', inputWidth:100}
  ]
})

import {toolbar} from "location-of-your-file"
...
webix.ui({
  view:"window",
  height:250,
  width:300,
  left:50, top:50,
  move:true,
  resize: true,
  head:"This window can be resized",
  body: toolbar
}).show();
#4

Hello and thanks for your help, but I have an error:
SyntaxError: import declarations may only appear at top level of a module

#5

Alright, try putting your import {toolbar} from "location-of-your-file" at the very top of the file and tell me about your result.

#6

`webix.ready ( function () { import {toolbar} from 'content.js';

webix.ui(
{
id : ‘winID123’,
view : ‘window’,
top : 100,
left : 100,
width : 600,
height : 400,
body :
{
view : ‘template’,
body : toolbar
}
} ).show();
} );

`
SyntaxError: import declarations may only appear at top level of a module
Inc: webix JS & CSS

#7

Yeah, your issue is that the import declaration is not at the very top, is should be above webix.ready ( function (..., for example:

import {toolbar} from 'content.js';

webix.ready ( function ()
{
  webix.ui(
  {
    id      : 'winID123',
    view    : 'window',
    top     : 100,
    left    : 100,
    width   : 600,
    height  : 400,
    body    : 
    {
      view  : 'template',
      body  : toolbar
    }
  } ).show();
} );
#8

index.html

`import {toolbar} from 'mitarbeiter.js'; webix.ready ( function () {

webix.ui(
{
id : ‘winID123’,
view : ‘window’,
top : 100,
left : 100,
width : 600,
height : 400,
body :
{
view : ‘template’,
body : toolbar
}
} ).show();

} );

`

content.js

`export const toolbar = webix.ui({ view:"toolbar", height: 65, cols: [ { view:"button", type: "htmlbutton", css: "icon_back_btn", label: 'Back', inputWidth:100}, { view:"button", value: "New Color", inputWidth:100, css:"bt_1"}, { view:"button", type: "htmlbutton", css: "icon_btn", label: 'Icon Button', inputWidth:100}, { view:"button", type: "htmlbutton", css: "image_btn", label: 'Image', inputWidth:100} ] })

`

Firefox

`Error : SyntaxError: import declarations may only appear at top level of a module

`

Chrome

`Error: Uncaught SyntaxError: Unexpected token {

`
#9

Ok, let’s try and clear out some misconceptions first:

First of all, you should never initialize your inner view with a webix.ui, it is already initialized, and would lead to some unwanted behavious.

Second,

 body    : 
    {
      view  : 'template',
      body  : toolbar
    }

Here you are trying to set the body of your template, while template itself doesn’t have such a property, it does not have a body property, so the correct way would be to set the body of your window pointing to any object you want inside.

And lastly, for any issues you are having with export/import modules you can find an answer here https://stackoverflow.com/questions/47182102/import-unexpected-token-chrome-62/47182169#47182169
In short, you need to specify the type of your js file as “module” inside your html for it to correctly work.

Overall, here’s a working example:

Your html file has its file type as “module”:

<script src="test.js" type="module" charset="utf-8"></script>

Your window has its body set to /whatever you want inside that window/, toolbar, in out example:

import {toolbar} from './content.js';

webix.ready (()=>{
  webix.ui({
    view    : 'window',
    body    : toolbar
  }).show();
});

And lastly your toolbar could look something like that:

export const toolbar = {
  view:"toolbar",
  cols: [ /* toolbar elements here*/  ]
}
#10

Huhu, thanks but that does not work :frowning:

And as I see it, that’s not the right thing for me.
I would like to dynamically reload the content.js when click:

Button1 = load content1.js in Window1
Button2 = load content2.js in Window2

content1.js = {view: “datatable”, …}
content2.js = {view: “list”, …}

I want to deposit components in content1 & content2 and reload them as needed :neutral:

So to speak, I want to deposit each component in an external file and reload if necessary :smile:

#11

Hey again, Volk3r, please take a look at this example, it should achieve your goal: https://snippet.webix.com/0u9k9z55.
Please note that if you are trying to make use of an uninitialized view more than once, it is best to wrap it around a webix.copy() method
Basically, you can dynamically redraw layouts using webix.ui constructor, you can find more detailed information at:https://docs.webix.com/desktop__dynamic_layout.html#rebuildingapplicationlayout
I’d also like to mention that if you are trying to apply this to more than just a window (for example trying to write a complex app) you should definitely give a try to Webix Jet, it lets you do the very thing you want in a way more convinient manner, simply by structuring your app into modules you can dynamically load.

#12

Hello and thank you for your support :smile:

Have now found a solution and would like to share this with you :blush:

index.html

`webix.ui( { id : 'winID', view : 'window', height: 250, width : 300, left : 50, top : 50, move : true, resize: true, head : 'Title...', body : { id:'bodyID' } } ).show();

webix.ajax(‘views.json’, function(text){
webix.ui(webix.DataDriver.json.toObject(text), $$(‘winID’), $$(‘bodyID’));
});

` views.json

`{ "view" : "toolbar", "height" : 65, "cols" : [ { "view":"button", "type": "htmlbutton", "css": "icon_back_btn", "label": "Back", "inputWidth":100 }, { "view":"button", "value": "New Color", "inputWidth":100, "css":"bt_1" }, { "view":"button", "type": "htmlbutton", "css": "icon_btn", "label": "Icon Button", "inputWidth":100 }, { "view":"button", "type": "htmlbutton", "css": "image_btn", "label": "Image", "inputWidth":100 } ] }

` Best regards Volk3r
#13

using ajax for config loading is preferred if config is something deferred or dynamic.
for static config import is better.