ulysseswbdv v1.1.72

what is this

Install Web BDV Ulysses library and create web bdvs.

installation

npm i ulysseswbdv

options

Support three arrays of objects with options

export const toolbarActions [{
        id:'' ,
        name:'' ,
        ico:'' ,
        className:'' ,
        iconName:'' ,
        event:'' ,
        codeName:'' ,
        enabled:true/false 
    }]
export const pages [{
        id: '',
        name: '',
        url: '',
        ComponentName: '',
        active: false/true
    }]
export const footerActions = [{
        codeName: '',
        id: '',
        name: '',
        page: '',
        enabled: true/false
}]

Usage

Events Handlers.

TOOLBAR ACTIONS HEADER.

eventsHandler = i => {

        if (eventData().CLOSEWINDOW === i.event) {
            PostCloseEvent()
        }
        else if (eventData().CLOSEWINDOWANDREFRESH === i.event) {
            PostCloseAndRefreshEvent()
        }
         else if (eventData().FORWARD === i.event) {
            var idx = pages.findIndex(t => t.ComponentName === this.state.componentName)
            if (pages[idx + 1] != undefined) {
                this.setState({ componentName: pages[idx + 1].ComponentName })
            }
        } else if (eventData().BACK === i.event) {
            var idx = pages.findIndex(t => t.ComponentName === this.state.componentName)
            if (pages[idx - 1] != undefined) {
                this.setState({ componentName: pages[idx - 1].ComponentName })
            }
        }
    }

PAGES AREA.

pagesHandler = i => {
        this.setState({ componentName: i.ComponentName })
}

MAIN AREA ACTIONS.

pagesActionsHandler = i => {
        
}

import files to Parent Component

import Index from 'ulysseswbdv/lib/Iframe'

PostCloseEvent (close wbdv from header close button)

import { PostCloseEvent, PostCloseAndRefreshEvent } from 'ulysseswbdv/src/event';

PostCloseAndRefreshEvent ( save and close wbdv refresh workplace task view)

import { toolbarActions } from '../../components/ScheduleJobMaintenanceReport/Utils/dataToolbar';

import fetch data to use ulysses services

import FetchData from '../../components/ScheduleJobMaintenanceReport/Utils/FetchData';

import event data to handle header actions events

import eventData from '../../components/ScheduleJobMaintenanceReport/Utils/toolbarEvents';

import main footer Actions for pages to handle actions events

import { footerActions } from '../../components/ScheduleJobMaintenanceReport/Utils/actionsFooter';

Import alert popup Messages templates components

import Queries from '../Messages/Queries';
import Information from '../Messages/Information';
import Error from '../Messages/Error';
import Warning from '../Messages/Warning';

App js component:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from "react-router-dom";
import ScheduleJobMaintenanceReport from '../src/components/ScheduleJobMaintenanceReport/ScheduleJobMaintenanceReport';
export default class App extends Component {
  render() {
    return (
        <Router>
            <div>
                <Route path='/ScheduleJobMaintenanceReport' component={ScheduleJobMaintenanceReport}  />       
            </div>
        </Router>
    );
  }
}

Example how we add Index Component Library with Pages to Parent Component web BDV:

 <Index toolbarActions={toolbarActions} 
        toolbarActions={toolbarActions}
                onSelectEvent={this.eventsHandler}
                pages={pages}
                pageActions={footerActions}
                onSelectPage={this.pagesHandler}
                onSelectPageActions={this.pagesActionsHandler}
                btnHeaderEnabled={this.state.btnHeaderEnabled}
                btnEnabled={this.state.btnEnabled}  >
                {this.state.componentName === 'CompletionReport' ? (
                    <CompletionReport />
                ) : this.state.componentName === 'JobDetails' ? (
                    <JobDetails />
                ) : this.state.componentName === 'MaintenanceHistory' ? (
                    <MaintenanceHistory />
                ) : this.state.componentName === 'ActivityDescription' ? (
                    <ActivityDescription/>
                ) : (
                    <RelatedFiles  />
                )}
                <Error popupVisible={this.state.popupVisible} OneventsHandlerCloseSave={this.eventsHandlerCloseSave} OnhideInfo={this.hideInfo} />
                
</Index >

Add to index.html

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body  class="skin-orange-light">
    <div id="root"></div>
</body>