Putting Multiview

Webix JS
#1

Hi there, im new in coding and webix as well. I have been learning HTML and CSS for 2 month then I chose webix to learn first, the it’s just because that i know that my dad has been using webix for years.

I have a question to put multiview in right space. What i want to create is a structure, which we can use sidebar to change container standing right. (multiview)

https://snippet.webix.com/pj52o4hq
That’s what i’m talking about here.

#2

Hi @Denizhan18,
The multiview is a container (layout) with switchable cells. One cell can be visible at a time. Each cell can be a layout of any complexity (or just a single view).
First, you need to create cells which define the content in multiview (at this step, please note that id of cells should be the same as id of options in the menu - this will be used in the example).

Cells can be switched with one of the following methods:

// set visible cell through multiview API
$$(multiviewId).setValue(cellId);

//direct command to a cell (similar to basic show/hide. 
//Multiview will switch to show the desired view)
$$(cellId).show()

So the main task is to select an option in menu => show a cell with a corresponding ID.
To do so, please add the onAfterSelectevent handler to the menu:

onAfterSelect: function (id) {
   //assuming the multiview cell has the same id as the selected option
   var view = $$(id);
   if (view)
      view.show();
}

Please check the snippet:
https://snippet.webix.com/j97e1tiv

#3

Thanks for support. That was fulfilling explanation.
Snippet helped a lot as well.

@annazankevich Would you inform me on changing font size and font style of all document please?

I could not find on documents. I can change using " webix_toolbar " CSS class.
Is there information on CSS image maps?

#4

Use class .webix_view for changing style for all document.
Please check the snippet:
https://snippet.webix.com/hbgh1xu7
Also, you can check information about available Webix skins and play with Skin Builder to create skins for Webix
Check documentation for getting information about any components CSS Image Maps

#5

@annazankevich Hello again,

I stucked at placing multiview there. This is the snippet i’m working on :smile:
https://snippet.webix.com/smyflds6

How can I place multiview on line 53,54,55 using cells to create 4 different dimensions? I could not imagine how I place it on my layout using documents on website, it was really hard to understand how multiview works. I didn’t have any issue trying to understand how it works on tabbar view e.t.c

Thanks in advance.

#6

check this
https://snippet.webix.com/m6dfg0js