Page Comparison

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: false,
            title: 'Displays',
        },
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['back'],
            showInfo: false,
            title: 'Displays',
        },
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['check'],
            showInfo: false,
            title: 'Displays',
        },
        check: {
            disabled: false,
            selected: 0,
            total: 5
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['check'],
            showInfo: true,
            title: 'Displays',
        },
        check: {
            disabled: false,
            selected: 2,
            total: 5
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            iconType: ['check'],
            showInfo: true,
            title: 'Displays',
        },
        check: {
            disabled: false,
            selected: 5,
            total: 5
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here..."
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here....",
        button: {
            show: true,
            actions: [{
                class: 'button',
                label: "Submit",
                action: "readytosubmit",       // string optional
                icon: SVG_SUBMIT
            }]
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here....",
        buttonFooter: { 
            show: true,
            actions: [{
                    class: 'button',
                    label: "Submit",
                    action: "footer-submit",       // string optional
                    icon: SVG_SUBMIT,
                    show: true
            }]
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with

...

Dropdown (Monthly Calendar)

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here....",
        paginationdropdown: {
            show: true,
            hideSummarytitle: false'File Test',
            countertype: 10'date-picker-monthly',
            perPageselection: 10,{
            page: 1,   startDate: "Feb 2021",
       total: 35,        endDate: "Feb 2021",
            },
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with

...

Pagination

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here....",
        dropdownpagination: {
            show: true,
            titlehideSummary: 'File Test'false,
            typecounter: 'date-picker-monthly'10,
            selectionperPage: {10,
            page: 1,
  startDate: "Feb 2021",        total: 35,
       endDate: "Feb 2021",
            },
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with

...

Main Button

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here....",
        paginationmainButton: {
            show: true,
            hideSummarylabel: false 'File a Request',
            countericon: 10SVG_ADD,
            perPageactions: 10,[
            page: 1,   {
         total: 35,         } 
   })          /**      * label: "File Leave",
    * getActions - method that gets the value and data of the component    action:  */"leave",       // conststring getActionsoptional
= (value, data) => {         console.log('VALUE', value, data)     }icon: SVG_SUBMIT
    ..............    return (     <>  },
    <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>         {
                    label: "File Overtime",
                    .......Children hereaction: "overtime",       </MenuBar>// string optional
    </>
  )

🔹 Properties

...

Parameter

...

Data Type

...

Constraint

...

Description

...

activities

...

Array

...

Required

...

                icon: SVG_SUBMIT
                },
        
                {
                    label: "File Toil",
                    action: "toil",       // string optional
                    icon: SVG_SUBMIT
                },
        
                {
                    label: "File Amendment",
                    action: "amendment",       // string optional
                    icon: SVG_SUBMIT
                }
            ]
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Pivot

...

Configuration

Code Block

import { MenuBar } from 'empower-container';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here....",
        pivot: {
            show: true,
            selected: 'all',
            actions: [
                {
                    label: "All",
                    value: "all",       // string optional
                },
                {
                    label: "Pending",
                    value: "pending",       // string optional
                },
                {
                    label: "Approved",
                    value: "approved",       // string optional
                },
                {
                    label: "Rejected",
                    value: "rejected",       // string optional
                },
                {
                    label: "Cancelled",
                    value: "cancelled",    // string optional
                },
            ]
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Menubar with Search

...

Configuration

Code Block

import { MenuBar } from 'empower-container';

..............

  let [contentMenuBar, setContentMenuBar] = useState({
        config: {
            show: true,
            icon: SVG_USER,
            iconType: ['standard'],
            showInfo: true,
            title: 'Displays',
        },
        info: "Sample information here....",
        search: {
            show: true,
            value: ''
        }
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
          .......Children here
      </MenuBar>
    </>
  )

🔹 Properties

Parameter	Data Type	Constraint	Description
config	Object	Required	Display the basic config including icon, title and info. show = Boolean icon = SVG iconType = Array (standard, check, back and close) showInfo = Boolean title = String
info	String	Optional	Display value of the popup information.
pagination	Object	Optional	Display the pagination feature in the right side of the menubar. show = Boolean hideSummary = Boolean counter = Number perPage = Number page = Number total = Number
buttonFooter	Object	Optional	Display set of buttons to the bottom of the menubar. show = Boolean actions = Array (class = String, label = String, action = String, icon = SVG, show = Boolean)
button	Object	Optional	Display set of buttons in the upper left part of the menubar. show = Boolean actions = Array (class = String, label = String, action = String, icon = SVG, show = Boolean)
search	Object	Optional	Display search bar field. show = Boolean value = String
pivot	Object	Optional	Display a dropdown at the upper right of the menubar. show = Boolean selected = String actions = Array (label = String, value = String)
check	Object	Optional	It handles the selected and the total value that will response on the display for the main checkbox at the menubar. disabled = Boolean selected = Number total = Number Note: check* property will not use if the there’s no check value iconType inside the config property.
mainButton	Object	Optional	Display the main button and display a dropdown if its multiple. show = Boolean label = String icon = SVG actions = Array (label = String, Icon = SVG, action = String)

🔹 References

Repository Link: https://gitlab.com/empowerteams/empower-displaycontainer.git

NPM Package: https://www.npmjs.com/package/empower-displaycontainer

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git

...

Versions Compared

Old Version 1

New Version Current

Key

🔹 Menubar with

Dropdown (Monthly Calendar)

🔹 Menubar with

Pagination

🔹 Menubar with

Main Button

🔹 Properties

🔹 Menubar with Pivot

🔹 Menubar with Search

🔹 Properties

🔹 References