• Components
    • Mixins

Components

Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Alert component specific methods and properties are listed below.
Type name: ui-bootstrap-alert
Properties
Name
Description
appearance: String
  • Changes the component background color.
  • Default: primary
    • Possible values:
      • primary
      • secondary
      • success
      • danger
      • warning
      • info
      • light
      • dark
autoDestroy: Boolean
  • Determines whether the component will be destroyed after it gets hidden.
  • Default: true
dismissible: Boolean
By setting this option to true we are enabling an option to dismiss this alert inline. Default: false
heading: Object
  • Represents the component header.
  • Default: undefined
    • Allowed properties:
      • size: Number
      • text: String
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-alert',
      autoLoad: true,
      renderTo: 'body',
      text: 'Hello World',
      heading: {
        size: 4,
        text: 'Header Text'
      }
      // other configs
    });
link: Object
  • Represents the a tag that will be created within this component body. It will rendered at a linkPlaceHolder position.
  • Default: undefined
    • Allowed properties:
      • href: String
      • text: String
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-alert',
      renderTo: 'body',
      autoLoad: true,
      text: 'Click me ##', // link placeholder is by default set to ##
      link: {
        href: 'https://www.google.com',
        text: 'Google'
      }
      // other configs
    });
linkPlaceHolder: String
Represent the character sequence that will be replaced by actual a tag created based on link config (if any). Default: ##
text: String
Represents the main text of the component to display. If it contains linkPlaceHolder it will be replaced by defined link config (if any).
Methods
Name
Description
close
Closes this component.
destroy
Destroys this component and it's children.
Events
Name
Description
onClose
This event fires immediately when the close method is called.
onClosed
This event is fired when the alert has been closed and after all CSS transitions are complete.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Breadcrumb component specific methods and properties are listed below.
Type name: ui-bootstrap-breadcrumb
Properties
Name
Description
crumbs: Object[]
  • Defines the array of objects based on which the crumbs layout will be created.
  • Default: []
    • Possible values:
      • text: String
      • isActive: Boolean (optional)
      • asLink: Boolean (optional)
  • Usage:
  •             pz.create({
                
      autoLoad: true,
      renderTo: 'body',
      type: 'ui-bootstrap-breadcrumb',
      crumbs: [{
        text: 'Crumb 1',
        asLink: true,
        isActive: false
      }]
      // other configs
    });
Methods
Name
Description
addCrumbs (crumb)
  • Adds a new breadcrumb dynamically. It can add one or more crumbs in a single call.
    • Parameters:
      • crumb: Object / Object[]
  • Usage:
  •             var crumbComp = pz.getInstanceOf('ui-bootstrap-breadcrumb');
                
    crumbComp.addCrumbs({
      text: 'Crumb 2'
    });
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Button component specific methods and properties are listed below.
Type name: ui-bootstrap-button
Properties
Name
Description
align: String
  • Represents the button alignment.
  • Default: undefined
    • Possible values:
      • left
      • right
appearance: String
  • Changes the component background and/or foreground color.
  • Default: primary
    • Possible values:
      • primary
      • outline-primary
      • secondary
      • outline-secondary
      • success
      • outline-success
      • danger
      • outline-danger
      • warning
      • outline-warning
      • info
      • outline-info
      • light
      • dark
      • link
buttonType: String
  • Represents the button type.
  • Default: button
    • Possible values:
      • button
      • submit
      • submit
href: String
Represents the link to redirect to when the button is clicked. If this is set the component template will be a tag. In this case, onClick event will not be dispatched.
size: String
  • Represents the button size.
  • Default: undefined
    • Possible values:
      • lg
      • sm
      • block
text: String
Represents the main text of the button to display.
Methods
Name
Description
destroy
Destroys this component and it's children.
setDisabled (value)
  • Sets the button disabled state.
    • Parameters:
      • value: Boolean
setText (value)
  • Sets the button text.
    • Parameters:
      • value: String
toggle
Toggles between button enabled and disabled state.
Events
Name
Description
onClick
This event is fired when the button is clicked.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Button Group component specific methods and properties are listed below.
Type name: ui-bootstrap-button-group
Properties
Name
Description
buttons: Object[]
  • This config is an equivalent to components config. The only difference is that you don't have to specify the type. It will automatically be set to ui-bootstrap-button. Beside button, ui-bootstrap-dropdown component is supported. The buttons array is merged with the components array during component initialization.
  • Default: []
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-button-group',
      autoLoad: true,
      renderTo: 'body',
      buttons: [{
        text: 'Button',
        appearance: 'success',
        onClick: function() {
          // implementation
        }
      }],
      components: [{
        type: 'ui-bootstrap-dropdown',
        text: 'Hello From Dropdown',
        menuItems: [{
          text: 'Menu Item 1'
        }]
      }]
      // other configs
    });
size: String
  • Represents the group size.
  • Default: undefined
    • Possible values:
      • lg
      • sm
      • block
vertical: Boolean
  • Make a set of buttons appear vertically stacked.
  • Default: false
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Button Toolbar component specific methods and properties are listed below.
Type name: ui-bootstrap-button-toolbar
Properties
Name
Description
groups: Object[]
  • This config is an equivalent to components config. The only difference is that you don't have to specify the type. It will automatically be set to ui-bootstrap-button-group. The groups array is merged with components array during component initialization.
  • Default: []
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-button-toolbar',
      renderTo: 'body',
      autoLoad: true,
      groups: [{
        buttons: [{
          text: 'Button',
          appearance: 'outline-warning',
          onClick: function() {
            // implementation
          }
        }]
      }]
      // other configs
    });
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Card component specific methods and properties are listed below.
Type name: ui-bootstrap-card
Properties
Name
Description
body: Boolean / Object
  • Represents the component body.
  • Default: { title: '', text: '' }
    • Allowed properties:
      • title: String (optional)
      • text: String (optional)
      • css: String / String[] (optional)
  • Usage:
  •             pz.create({
                
      autoLoad: true,
      renderTo: 'body',
      type: 'ui-bootstrap-card',
      header: false,
      footer: false,
      body: {
        title: 'Hello, this is Card Body title',
        text: 'Hello, this is Card Body text',
        css: ['bg-dark', 'text-white']
      }
      // other configs
    });
  • If the value is set to false, the body will not be rendered.
buttons: Object[]
  • This config is an equivalent to components config. The only difference is that you don't have to specify the type and renderTo. The type will automatically be set to ui-bootstrap-button, and renderTo will be set to > div.card-footer. The buttons array is merged with components array during component initialization.
  • Default: []
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-card',
      autoLoad: true,
      renderTo: 'body',
      header: {
        text: 'Hello, this is Card Header text',
        css: ['bg-info', 'text-light']
      },
      body: {
        title: 'Hello, this is Card Body title',
        text: 'Hello, this is Card Body text',
        css: ['bg-light', 'text-dark']
      },
      buttons: [{
        text: 'Button',
        appearance: 'success',
        align: 'right',
        onClick: function() {
          // implementation
        }
      }]
      // other configs
    });
footer: Boolean / Object
  • Represents the component footer.
  • Default: { text: '' }
    • Allowed properties:
      • text: String (optional)
      • css: String / String[] (optional)
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-card',
      autoLoad: true,
      renderTo: 'body',
      body: false,
      header: false,
      footer: {
        text: 'Hello, this is Card Footer text',
        css: ['bg-info', 'text-dark'],
      }
      // other configs
    });
  • If the value is set to false, the footer will not be rendered.
header: Boolean / Object
  • Represents the component header.
  • Default: { text: '' }
    • Allowed properties:
      • text: String (optional)
      • css: String / String[] (optional)
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-card',
      autoLoad: true,
      renderTo: 'body',
      body: false,
      footer: false,
      header: {
        text: 'Hello, this is Card Header text',
        css: ['bg-light', 'text-dark']
      }
      // other configs
    });
  • If the value is set to false, the header will not be rendered.
Methods
Name
Description
setHeaderText: (value)
  • Sets the header (if defined) inner html dynamically.
    • Parameters:
      • value: String
  • Usage:
  •             var comp = pz.getInstanceOf('ui-bootstrap-card');
                
    comp.setHeaderText('Some header text');
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Carousel component specific methods and properties are listed below.
Type name: ui-bootstrap-carousel
Properties
Name
Description
indicators: Boolean
  • Determines whether the component will have the indicators, alongside the controls.
  • Default: true
interval: Number
  • Determines the duration of the cycling process.
  • Default: 5000
keyboard: Boolean
  • Determines whether the component should react to keyboard events.
  • Default: true
pauseOnHover: Boolean
  • Determines whether the component should stop the cycling process if hovered by mouse pointer.
  • Default: false
slides: Object[]
  • Holds the definition of the component slides.
  • Default: []
    • Possible values:
      • caption: String
      • text: String
      • css: Object[]
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-carousel',
      autoLoad: true,
      renderTo: 'body',
      style: 'height: 500px',
      slides: [{
        caption: 'Slider Caption',
        text: 'Slider Text',
        css: ['bg-info', 'text-dark'],
      }, {
        caption: 'Slider Caption 2',
        text: 'Slider Text 2',
        css: ['bg-info', 'text-dark'],
      }]
      // other configs
    });
Methods
Name
Description
cycle (pause)
  • Toggles between the pause and cycle state.
    • Parameters:
      • pause: Boolean
destroy
Destroys this component and it's children.
slideNext
Moves the carousel to the next slide.
slidePrev
Changes focus to the previous slide.
slideTo (number)
  • Cycles the carousel to a particular slide.
    • Parameters:
      • number: Number
Events
Name
Description
onSlid
This event is fired after all slide transitions has completed.
onSlide
This event fires immediately when the slide method is invoked.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Collapse component specific methods and properties are listed below.
Type name: ui-bootstrap-collapse
Properties
Name
Description
parent: String
If provided, all collapsible elements under the specified parent will be hidden when the selected item is shown.
target: String
Represents the CSS selector that will match the element(s) to collapse.
Methods
Name
Description
destroy
Destroys this component and it's children.
hide
Hides the component.
show
Shows the component.
toggle
Toggles between the collapsible elements.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Container component specific methods and properties are listed below.
Type name: ui-bootstrap-container
Properties
Name
Description
body: String
  • Represents the component body content.
  • Default: ''
  • Note that this will be applied only in case when no child components were defined.
fluid: Boolean
  • Determines whether the component will have the full width of it's container or not.
  • Default: false
jumbotron: Object
  • Represents the jumbotron config.
  • Default: undefined
    • Allowed properties:
      • title: Object
      • leadText: String
      • buttons: Object[]
      • divider: Object
      • innerFluid: Boolean
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-container',
      autoLoad: true,
      renderTo: 'body',
      renderAs: 'jumbotron',
      jumbotron: {
        title: {
          text: 'Jumbotron',
          size: 4
        },
        divider: {
          size: 4
        },
        innerFluid: false,
        leadText: 'This is lead text',
        buttons: [{ // This is a list of ui-bootstrap-button components. No need to set the type here, it's done automatically
          text: 'Getting Started',
          size: 'lg',
          onClick: function() {
            // implementation
          }
        }]
      }
      // other configs
    });
  • Note that this is taken into a count only in case when renderAs is configured as 'jumbotron'.
renderAs: String
  • Determines the way the component will be rendered. Depending on value, different CSS classes will be applied.
  • Default: container
    • Parameters:
      • container: String
      • jumbotron: String
      • row: String
      • column: String
      • form-row: String
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Dropdown component specific methods and properties are listed below.
Type name: ui-bootstrap-dropdown
Properties
Name
Description
appearance: String
  • Changes the component background and/or foreground color.
  • Default: primary
    • Possible values:
      • primary
      • outline-primary
      • secondary
      • outline-secondary
      • success
      • outline-success
      • danger
      • outline-danger
      • warning
      • outline-warning
      • info
      • outline-info
      • light
      • dark
      • link
inNav: Boolean
  • Determines whether the component is a direct child of ui-bootstrap-navbar component. It is used internally to set a CSS styling for this component.
  • Default: undefined
  • In most cases this will be done dynamically by the framework but if you, for example, specify the dropdown as a menu item of a ui-bootstrap-navbar component the parent will not be recognized as a ui-bootstrap-navbar, therefore you need to specify this flag manually.
menuItems: Object[]
  • Represent the list of dropdown menu items.
  • Default: []
    • Allowed properties:
      • text: String
      • href: String
      • divide: Boolean
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-dropdown',
      autoLoad: true,
      renderTo: 'body',
      text: 'Hello From Dropdown',
      menuItems: [{
        text: 'Menu Item 1'
      }, {
        text: 'Menu Item 2',
        divide: true,
        href: 'https://www.google.com/'
      }, {
        text: 'Menu Item 3',
        href: 'https://www.yahoo.com/'
      }]
      // other configs
    });
split: Boolean
  • Determines whether to create a dropdown as a split button or not.
  • Default: undefined
  • Note that this must be false if inNav is determined as truthy. In other words, in bootstrap navbar we can't use split dropdowns.
text: String
Represents the main text of the component to display.
Methods
Name
Description
destroy
Destroys this component and it's children.
disable (idx)
  • Disables an item based on given index.
    • Parameters:
      • idx: Number
toggle
Toggles the dropdown menu.
update
Updates the position of a dropdown.
Events
Name
Description
onDropdownHidden
This event is fired after the dropdown has been hidden.
onDropdownHide
This event fires immediately when the hide method is invoked, before the dropdown has been hidden.
onDropdownShow
This event fires immediately when the show method is invoked, before the dropdown has been shown.
onDropdownShown
This event is fired after the dropdown has been shown.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Form component specific methods and properties are listed below.
Type name: ui-bootstrap-form
Properties
Name
Description
action: String
Represents the form action.
button: Object
  • This config represents the form submit button. It's nothing else than a ui-bootstrap-button component. The type will be set automatically and the button will be created as a child component.
  • Default:
                {
                
      text: 'Submit',
      appearance: 'primary',
      type: 'submit',
      align: 'right',
      css: []
    }
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-form',
      autoLoad: true,
      renderTo: 'body',
      button: {
        text: 'Send data',
        appearance: 'outline-success'
      },
      components: [{
        type: 'ui-bootstrap-select',
        labelText: 'Select me:',
        onChange: function() {
          // implementation
        },
        dataSource: [{
          id: 1,
          value: 'Option 1'
        }, {
          id: 2,
          value: 'Option 2'
        }]
      }, {
        type: 'ui-bootstrap-input',
        labelText: 'Name:',
      }, {
        type: 'ui-bootstrap-input',
        labelText: 'Surname:'
      }, {
        type: 'ui-bootstrap-input',
        inputType: 'checkbox',
        labelText: 'Check me',
        onChange: function() {
          // implementation
        }
      }]
      // other configs
    });
inline: Boolean
  • Determines whether the form component will render it's child components inline.
  • Default: false
method: String
Represents the form method.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Grid component specific methods and properties are listed below.
Type name: ui-bootstrap-grid
Properties
Name
Description
fluid: Boolean
  • Determines whether the component will have the full width of it's container or not.
  • Default: false
rows: Object[]
  • This config represents the grid rows.
  • Default:
                [{
                
      css: [],
      generateId: false,
      columns: [{
        text: '',
        generateId: false,
        size: 12,
        css: []
      }]
    }]
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-grid',
      autoLoad: true,
      renderTo: 'body',
      rows: [{ // generates passed id
        id: 'unique-first-row-id',
        columns: [{ // no id generated
          css: ['first-column'],
          size: 4
        }, { // generates passed id
          id: 'unique-id-second-column',
          text: 'Column with text',
          size: 4
        }, { // generates generic id based on index
          generateId: true,
          text: '<div class="bg-dark text-white d-block">Column with html</div>',
          size: 4
        }],
      }, { // no id generated
        generateId: false,
        columns: [{ // generates generic id based on index
          text: 'Me and my parent row do not have ids generated!',
          size: 12
        }]
      }]
    }, {
        type: 'ui-bootstrap-container',
        fluid: true,
        css: ['p-0'],
        renderTo: 'div.first-column',
        body: 'Iam container in a column!'
    });
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Input component specific methods and properties are listed below.
Type name: ui-bootstrap-input

Example usage:

        pz.create({
        
  type: 'ui-bootstrap-input',
  autoLoad: true,
  renderTo: 'body',
  labelText: 'Enter your name:',
  placeholder: 'Name...',
  onChange: function() {
    // implementation
  }
  // other configs
});
Properties
Name
Description
group: String
  • Represents the component group.
  • Default: undefined
  • This config should be used only on radios.
helpText: String
  • Represent the help text, or tip, that will be shown below the component.
  • Default: ''
inForm: Boolean
  • Determines whether this component is direct child of a form component. Based on this flag, different html markup will be generated.
  • Default: false
inline: Boolean
  • Renders checkboxes or radios in the same horizontal row.
  • Default: false
  • This config should be used only on checkboxes and radios.
inputType: String
  • Sets the component type.
    • Possible values:
      • text
      • checkbox
      • radio
      • file
labelText: String
  • Represent the text of a label that will be associated with the component.
  • Default: ''
placeholder: String
  • Represent the help text, or tip, that will be shown within the component.
  • Default: 'Enter text...'
plaintext: Boolean
  • Renders the component as plaintext.
  • Default: false
readonly: Boolean
  • Renders the component as readonly.
  • Default: false
simple: Boolean
  • Determines whether the control will be rendered without any CSS styling.
  • Default: false
size: String
  • Represents the component size.
  • Default: undefined
    • Possible values:
      • lg
      • sm
Methods
Name
Description
getValue
Retrieves the component value.
setDisabled (value)
  • Sets the component as disabled or enabled.
    • Parameters:
      • value: Boolean
setReadonly (value)
  • Sets the component as readonly or not.
    • Parameters:
      • value: Boolean
setRequired (value)
  • Determines whether the component allows empty values or not.
    • Parameters:
      • value: Boolean
setValue (value)
  • Sets the component value.
    • Parameters:
      • value
Events
Name
Description
onChange
This event is fired when text input is changed.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Input Group component specific methods and properties are listed below.
Type name: ui-bootstrap-input-group
Properties
Name
Description
addon: Object / Object[]
  • Represents the component control addon. Via this property you define the addon component config.
  • Default: undefined
    • Allowed properties:
      • position: String (optional)
      • renderAs: Object
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-input-group',
      autoLoad: true,
      renderTo: 'body',
      addon: [{
        renderAs: {
          type: 'ui-bootstrap-input',
          inputType: 'checkbox',
          onChange: function() {
            // implementation
          }
        }
      }, {
        renderAs: {
          type: 'text',
          text: '$'
        }
      }, {
        renderAs: {
          type: 'text',
          text: '0.00'
        },
        position: 'append'
      }]
      // other configs
    });
  • Allowed components to be created as addon are ui-bootstrap-button, ui-bootstrap-dropdown and ui-bootstrap-input
input: Object
  • Represents the input control of the component. Via this config we configure the main control.
  • Default:
                {
                
      type: 'ui-bootstrap-input'
    }
    • Possible type values:
      • ui-bootstrap-input
      • ui-bootstrap-select
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-input-group',
      autoLoad: true,
      renderTo: 'body',
      input: {
        type: 'ui-bootstrap-select',
        onChange: function() {
          // implementation
        },
        dataSource: [{
          id: 1,
          value: 'City 1'
        }, {
          id: 2,
          value: 'City 2'
        }]
      },
      addon: {
        renderAs: {
          type: 'text',
          text: 'Cities'
        }
      }
      // other configs
    });
  • Allowed components to be created as main control are ui-bootstrap-input, ui-bootstrap-select
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. List Group component specific methods and properties are listed below.
Type name: ui-bootstrap-list-group
Properties
Name
Description
actionable: Boolean
  • Determines whether the component will render it's menu items as clickable links.
  • Default: false
flushed: Boolean
  • Defines the component styling. If set to true, borders and rounded corners will be removed from every item.
  • Default: false
menuItems: Object[]
  • Represent the list of component menu items.
  • Default: []
    • Allowed properties:
      • text: String
      • href: String
      • appearance: String
      • css: String[]
  • Usage:
  •             pz.create({
                
      type: 'ui-bootstrap-list-group',
      autoLoad: true,
      renderTo: 'body',
      actionable: true,
      menuItems: [{
        text: 'Menu Item 1',
        appearance: 'primary',
        href: 'https://developer.mozilla.org'
      }, {
        text: 'Menu Item 2',
        appearance: 'secondary',
        href: 'https://www.google.com'
      }, {
        text: 'Menu Item 3',
        appearance: 'warning',
        href: 'https://www.yahoo.com'
      }]
      // other configs
    });
mode: String
  • Determines whether the component will be rendered as static list or as tabbable panes.
  • Default: list
    • Possible values:
      • list
      • tab
noHash: Boolean
  • Determines whether the component will render it's menu items without a default href value, the #. If set to true, javascript:void(0) will be used.
  • Default: undefined
  • Note that this is applicable only if href hasn't been set within the menu item it self.
Methods
Name
Description
disable (idx)
  • Disables an item based on given index.
    • Parameters:
      • idx: Number
enable (idx)
  • Enables an item based on given index.
    • Parameters:
      • idx: Number
Events
Name
Description
onTabHidden
This event is fired after the tab has been hidden.
onTabHide
This event fires immediately when the hide method is invoked, before the tab has been hidden.
onTabShow
This event fires immediately when the show method is invoked, before the tab has been shown.
onTabShown
This event is fired after the tab has been shown.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Modal Dialog component specific methods and properties are listed below.
Type name: ui-bootstrap-modal
  • Example usage:
  •             pz.define('my-modal', { 
                
      ownerType: 'ui-bootstrap-modal',
      size: 'lg',
      buttons: 'Ok_Cancel',
      renderTo: 'body',
      header: {
        text: 'Modal Header'
      },
      components: [{
        type: 'ui-bootstrap-form',
        button: null, // we will use modal buttons therefore we don't need one on our form
        components: [{
          type: 'ui-bootstrap-select',
          labelText: 'Select me:',
          onChange: function() {
            // implementation
          },
          dataSource: [{
            id: 1,
            value: 'Option 1'
          }, {
            id: 2,
            value: 'Option 2'
          }]
        }, {
          type: 'ui-bootstrap-input',
          labelText: 'Name:'
        }, {
          type: 'ui-bootstrap-input',
          labelText: 'Surname:',
        }, {
          type: 'ui-bootstrap-input',
          inputType: 'checkbox',
          labelText: 'Check me',
          onChange: function() {
            // implementation
          }
        }]
      }],
      onButtonClick: function(e, button) {
        // implementation
      }
      // other configs
    });
  • Setup the modal as one of the root components. This way it will be created upon app initialization and can be reused later.
  •             pz.defineApplication({ 
                
      name: 'My App',
      namespace: 'myApp',
      components: [
        'my-modal'
      ],
      init: function() {
        var btn = pz.getDefinitionOf('ui-bootstrap-button').create();
        btn.renderTo = 'body';
        btn.onClick = function() {
          var modal = pz.getInstanceOf('my-modal');
          modal.show();
        };
        btn.load();
      }
      // other configs
    });
Properties
Name
Description
autoDestroy: Boolean
  • Determines whether the component will be destroyed after it gets hidden.
  • Default: false
autoFocus: Boolean
  • Puts the focus on the modal after it gets initialized.
  • Default: true
autoHide: Boolean
  • Determines whether the component will be hidden after button handler (onButtonClick) has completed.
  • Default: true
backdrop: Boolean / String
  • Determines whether the backdrop element will be included.
  • Default: true
    • Possible values:
      • true / false
      • static
  • If static option is used, the modal will not be closed on click.
body: Boolean / Object
  • Represents the component body.
  • Default: { text: '' }
    • Allowed properties:
      • text: String
  • If the value is set to false, the body will not be rendered.
buttons: String
  • A list of buttons separated by underscore.
  • Default: Yes_No_Cancel
  • This list will be split by underscore and for each part will be created a button component. Buttons will be rendered in the footer section.
centered: Boolean
  • Determines whether the component will be vertically centered.
  • Default: false
fade: Boolean
  • Determines whether the component will use fade animation.
  • Default: false
footer: Boolean / Object
  • Represents the component footer.
  • Default: { text: '' }
    • Allowed properties:
      • text: String
  • If the value is set to false, the footer will not be rendered.
header: Boolean / Object
  • Represents the component header.
  • Default: { text: '' }
    • Allowed properties:
      • text: String
  • If the value is set to false, the header will not be rendered.
keyboard: Boolean
  • Determines whether the component will be closed when escape is pressed.
  • Default: true
size: String
  • Represents the component size.
  • Default: undefined
    • Possible values:
      • lg
      • sm
Methods
Name
Description
hide
  • Manually hides this component.
show
  • Manually shows this component.
toggle
  • Manually toggles this component between it's shown and hidden state.
update
  • Manually adjust the component's position if the height changes (i.e. in case a scrollbar appears).
Events
Name
Description
onButtonClick
This event fires immediately when any button gets clicked.
onModalHidden
This event is fired after all CSS transitions has completed and the modal has been made hidden to the user.
onModalHide
This event fires immediately when the hide method is invoked.
onModalShow
This event fires immediately when the show method is invoked.
onModalShown
This event is fired after all CSS transitions has completed and the modal has been made visible to the user.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Navigation component specific methods and properties are listed below.
Type name: ui-bootstrap-nav
  • Example usage:
  •             pz.create({
                
      type: 'ui-bootstrap-nav',
      autoLoad: true,
      renderTo: 'body',
      pills: true,
      position: 'center',
      menuItems: [{
        text: 'Menu Item 1',
        active: true,
        href: 'https://developer.mozilla.org'
      }, {
        text: 'Menu Item 2',
        href: 'https://www.google.com'
      }, {
        text: 'Menu Item 3',
        href: 'https://www.yahoo.com'
      }]
      // other configs
    });
  • Tabs example usage:
  •             pz.create({
                
      type: 'ui-bootstrap-nav',
      autoLoad: true,
      renderTo: 'body',
      mode: 'tab',
      menuItems: [{
        text: 'Home',
        active: true,
        href: '#home'
      }, {
        text: 'About',
        href: '#about'
      }, {
        text: 'Contact',
        href: '#contact'
      }]
      // other configs
    });
Properties
Name
Description
fill: Boolean
  • Forces the component content to extend the full width.
  • Default: false
menuItems: Object[]
  • Represent the list of component menu items.
  • Default: []
    • Allowed properties:
      • type: String
      • text: String
      • href: String
      • active: Boolean
      • css: String[]
      • ...any (taken into a count only if type is provided)
  • Allowed component to be created as menu item is ui-bootstrap-dropdown.
mode: String
  • Determines whether the component will be rendered as navigation or as tabbable panes.
  • Default: nav
    • Possible values:
      • nav
      • tab
pills: Boolean
  • Determines the each item styling. Useful when working with tabbable panes.
  • Default: false
position: String
  • Determines horizontal alignment.
  • Default: start
    • Possible values:
      • start
      • center
      • end
      • around
      • between
vertical: Boolean
  • Stacks the navigation items vertically.
  • Default: false
Events
Name
Description
onTabHidden
This event is fired after the tab has been hidden.
onTabHide
This event fires immediately when the hide method is invoked, before the tab has been hidden.
onTabShow
This event fires immediately when the show method is invoked, before the tab has been shown.
onTabShown
This event is fired after the tab has been shown.
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Navigation bar component specific methods and properties are listed below.
Type name: ui-bootstrap-navbar
  • Example usage:
  •             pz.create({ 
                
      type: 'ui-bootstrap-navbar',
      autoLoad: true,
      renderTo: 'body',
      toggler: true,
      position: 'top',
      brand: {
        type: 'text',
        value: 'Company'
      },
      menu: {
        position: 'left',
        items: [{
          href: 'http://www.google.com/',
          text: 'Google'
        }, {
          type: 'ui-bootstrap-dropdown',
          text: 'Other',
          inNav: true,
          menuItems: [{
            text: 'MSDN',
            divide: true,
            href: 'https://msdn.microsoft.com/en-us/'
          }, {
            text: 'Yahoo',
            href: 'https://www.yahoo.com/'
          }]
        }]
      }
      // other configs
    });
  • Note that only ui-bootstrap-dropdown component is allowed in menu items.
Properties
Name
Description
brand: Object
  • Sets the application brand located in the top left corner of the component.
  • Default: { type: 'text', value: 'My App' }
    • Allowed properties:
      • type: String
      • value: Any
      • href: String
      • imageSrc String
menu: Object
  • Sets the application brand located in the top left corner of the component.
  • Default: {}
    • Allowed properties:
      • position: String
      • items: Object[]
position: String
  • Determines the position of the component.
  • Default: top
    • Possible values:
      • top
      • bottom
sticky: Boolean
  • Determines whether the component will have a fixed position.
  • Default: false
theme: String
  • Determines the coloring of the component.
  • Default: light
    • Possible values:
      • primary
      • secondary
      • success
      • danger
      • warning
      • info
      • light
      • dark
      • white
      • transparent
toggler: Boolean
  • Determines whether the component will have a hamburger button which will toggle the menu on lower resolutions.
  • Default: false
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Progress component specific methods and properties are listed below.
Type name: ui-bootstrap-progress
  • Example usage:
  •             pz.create({
                
      type: 'ui-bootstrap-progress',
      autoLoad: true,
      renderTo: 'body',
      animated: true,
      values: {
        min: 0,
        now: 15,
        max: 80
      }
      // other configs
    });
Properties
Name
Description
animated: Boolean
  • Determines whether the component will have an animated stripe.
  • Default: false
showValue: Boolean
  • Determines whether the component will have labels within the progress bar.
  • Default: true
values: Object
  • Represents the lowest, current and highest allowed value of the component.
  • Default:
                {
                
      min: 0
      now: 25
      max: 100
    }
Methods
Name
Description
setValues: values
  • Sets the values dynamically.
    • Parameters:
      • values: Object[]
  • Usage:
  •             var component = pz.getInstanceOf('ui-bootstrap-progress');
                
    component.setValues({
      min: 0
      now: 30
      max: 100
    });
Note that each BootstrapUI component boils down to the core component type and therefore it supports all of the component core functionality. Progress component specific methods and properties are listed below.
Type name: ui-bootstrap-select
  • Example usage:
  •             pz.create({
                
      type: 'ui-bootstrap-select',
      autoLoad: true,
      labelText: 'Select an Option:',
      renderTo: 'body',
      dataSource: [{
        id: 1,
        value: 'Option 1'
      }, {
        id: 2,
        value: 'Option 2'
      }]
      // other configs
    });
Properties
Name
Description
custom: Boolean
  • Determines whether the component will have a custom CSS applied. This is set to true automatically when the component is used together with ui-bootstrap-input-group component
  • Default: false
dataSource: Object[]
  • Represents a collection of objects used as a source for the component options.
  • Default: []
displayField: String
  • Represents a property name which must be present in each data source object. The resolved value is the visibly rendered value of the available options.
  • Default: value
labelText: String
  • Represent the text of a label that will be associated with the component.
  • Default: ''
multiple: Boolean
  • Attaches multiple attribute to the component.
  • Default: false
valueField: String
  • Represents a property name which must be present in each data source object. The resolved value is the underlying value of the available options.
  • Default: id
Methods
Name
Description
getValue
Retrieves the component value.
setDataSource (data)
  • Sets the component data source dynamically.
    • Parameters:
      • data: Object[]
setDisabled (value)
  • Sets the component as disabled or enabled.
    • Parameters:
      • value: Boolean
setReadonly (value)
  • Sets the component as readonly or not.
    • Parameters:
      • value: Boolean
setRequired (value)
  • Determines whether the component allows empty values or not.
    • Parameters:
      • value: Boolean
setValue (value)
  • Sets the component value.
    • Parameters:
      • value
Events
Name
Description
onChange
This event is fired when selected option is changed.

Mixins

Note that each BootstrapUI mixin boils down to the core mixin type and therefore it supports all of the mixin core functionality. Form Field mixin specific methods and properties are listed below.
Type name: ui-bootstrap-form-field-mix
Methods
Name
Description
getValue
Retrieves the component value.
setDisabled (value)
  • Sets the component as disabled or enabled.
    • Parameters:
      • value: Boolean
setReadonly (value)
  • Sets the component as readonly or not.
    • Parameters:
      • value: Boolean
setRequired (value)
  • Determines whether the component allows empty values or not.
    • Parameters:
      • value: Boolean
setValue (value)
  • Sets the component value.
    • Parameters:
      • value