[ SOLVED ] Basic subview show/hide / user-manager

Webix JS
#1

Hi ! (back after 2 years without webix)

Is the source code for User Manager: JavaScript User Managment framework | Webix available anywhere ?

I’m trying to display a details panel when you click on an element, exactly like in this demo.

Thank you.

#2

Good day @franck34 ,

In the demo above, it is our complex widget User Manager .

To create something similar the other way, you could use, for instance, an ui.template , and its template property (or other suitable view) and hide / show it, using hide() / show() methods.

1 Like
#3

Thank you @MariyaDemy

I end up with this

import { JetView } from 'webix-jet';
import DatatableView from './datatable.js';
import TopBarView from './topbar.js';

export default class MyView extends JetView {

  config() {

    this.resizerId = webix.uid();
    this.subviewId = webix.uid();
    
    const ui = {
      cols:[
        {
          rows:[
            TopBarView,
            DatatableView
          ]
        },
        { view:'resizer', id:this.resizerId },
        { template:'here it is :) ', id:this.subviewId }
      ]
    };

    return ui;
  }

  showHideSubview(show) {
    if (show) {
      $$(this.resizerId).show();
      $$(this.subviewId).show();
    } else {
      $$(this.resizerId).hide();
      $$(this.subviewId).hide();
    }
  }

  urlChange(view, page ) {
    this.showHideSubview(typeof page[0]?.params?.sids === 'string');
  }
}
#4

Use JetView getParams method

urlChange(view, page ) {
    const sids = this.getParam('sids');
    this.showHideSubview(typeof sid != 'undefined' && sid.toString().length > 0);
}