ulysseswbdv
v1.1.72
Published
Ulysses Web(BDV)
Downloads
202
Maintainers
Readme
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>