Lägga till en anpassad utfällbara objekt i webbgränssnittet för fjärrövervakningslösningsacceleratorn
Den här artikeln visar hur du lägger till en ny utfällbara objekt på en sida i webbgränssnittet för lösningsacceleratorn för fjärrövervakning. Artikeln beskriver:
- Förbereda en lokal utvecklingsmiljö.
- Så här lägger du till en ny utfälld meny på en sida i webbgränssnittet.
Den utfällbara exempelrutan i den här artikeln visas på sidan med rutnätet som artikeln Lägg till ett anpassat rutnät i webbgränssnittet för fjärrövervakningslösningsacceleratorn visar hur du lägger till.
Förutsättningar
För att slutföra stegen i den här instruktionsguiden behöver du följande programvara installerad på din lokala utvecklingsdator:
Innan du börjar
Du bör slutföra stegen i följande artiklar innan du fortsätter:
- Lägg till en anpassad sida i webbgränssnittet för fjärrövervakningslösningsacceleratorn.
- Lägga till en anpassad tjänst i webbgränssnittet för fjärrövervakningslösningsacceleratorn
- Lägga till ett anpassat rutnät i webbgränssnittet för fjärrövervakningslösningsacceleratorn
Lägg till en utfällbar meny
Om du vill lägga till en utfälld meny i webbgränssnittet måste du lägga till källfilerna som definierar den utfällbara menyn och ändra vissa befintliga filer för att göra webbgränssnittet medvetet om den nya komponenten.
Lägg till de nya filerna som definierar den utfällbara menyn
För att komma igång innehåller mappen src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout de filer som definierar en utfälld meny:
exampleFlyout.container.js
import { withNamespaces } from 'react-i18next';
import { ExampleFlyout } from './exampleFlyout';
export const ExampleFlyoutContainer = withNamespaces()(ExampleFlyout);
exampleFlyout.js
import React, { Component } from 'react';
import { ExampleService } from 'walkthrough/services';
import { svgs } from 'utilities';
import {
AjaxError,
Btn,
BtnToolbar,
Flyout,
Indicator,
SectionDesc,
SectionHeader,
SummaryBody,
SummaryCount,
SummarySection,
Svg
} from 'components/shared';
import './exampleFlyout.scss';
export class ExampleFlyout extends Component {
constructor(props) {
super(props);
this.state = {
itemCount: 3, //just a fake count; this would often be a list of items that are being acted on
isPending: false,
error: undefined,
successCount: 0,
changesApplied: false
};
}
componentWillUnmount() {
if (this.subscription) this.subscription.unsubscribe();
}
apply = (event) => {
event.preventDefault();
this.setState({ isPending: true, successCount: 0, error: null });
this.subscription = ExampleService.updateExampleItems()
.subscribe(
_ => {
this.setState({ successCount: this.state.successCount + this.state.itemCount });
// Update any global state in the redux store by calling any
// dispatch methods that were mapped in this flyout's container.
},
error => this.setState({ error, isPending: false, changesApplied: true }),
() => this.setState({ isPending: false, changesApplied: true, confirmStatus: false })
);
}
getSummaryMessage() {
const { t } = this.props;
const { isPending, changesApplied } = this.state;
if (isPending) {
return t('walkthrough.pageWithFlyout.flyouts.example.pending');
} else if (changesApplied) {
return t('walkthrough.pageWithFlyout.flyouts.example.applySuccess');
} else {
return t('walkthrough.pageWithFlyout.flyouts.example.affected');
}
}
render() {
const { t, onClose } = this.props;
const {
itemCount,
isPending,
error,
successCount,
changesApplied
} = this.state;
const summaryCount = changesApplied ? successCount : itemCount;
const completedSuccessfully = changesApplied && !error;
const summaryMessage = this.getSummaryMessage();
return (
<Flyout header={t('walkthrough.pageWithFlyout.flyouts.example.header')} t={t} onClose={onClose}>
{
/**
* Really, anything you need could go inside a flyout.
* The following is a simple empty form with buttons to do an action or close the flyout.
* */
}
<form className="example-flyout-container" onSubmit={this.apply}>
<div className="example-flyout-header">{t('walkthrough.pageWithFlyout.flyouts.example.header')}</div>
<div className="example-flyout-descr">{t('walkthrough.pageWithFlyout.flyouts.example.description')}</div>
<div className="form-placeholder">{t('walkthrough.pageWithFlyout.flyouts.example.insertFormHere')}</div>
{/** Sumarizes the action being taken; including count of items affected & status/pending indicator */}
<SummarySection>
<SectionHeader>{t('walkthrough.pageWithFlyout.flyouts.example.summaryHeader')}</SectionHeader>
<SummaryBody>
<SummaryCount>{summaryCount}</SummaryCount>
<SectionDesc>{summaryMessage}</SectionDesc>
{this.state.isPending && <Indicator />}
{completedSuccessfully && <Svg className="summary-icon" path={svgs.apply} />}
</SummaryBody>
</SummarySection>
{/** Displays an error message if one occurs while applying changes. */}
{error && <AjaxError className="example-flyout-error" t={t} error={error} />}
{
/** If changes are not yet applied, show the buttons for applying changes and closing the flyout. */
!changesApplied &&
<BtnToolbar>
<Btn svg={svgs.reconfigure} primary={true} disabled={isPending || itemCount === 0 } type="submit">{t('walkthrough.pageWithFlyout.flyouts.example.apply')}</Btn>
<Btn svg={svgs.cancelX} onClick={onClose}>{t('walkthrough.pageWithFlyout.flyouts.example.cancel')}</Btn>
</BtnToolbar>
}
{
/**
* If changes are applied, show only the close button.
* Other text or component might be included here as well.
* For example, you might provide a link to the detail page for a newly submitted job.
* */
!!changesApplied &&
<BtnToolbar>
<Btn svg={svgs.cancelX} onClick={onClose}>{t('walkthrough.pageWithFlyout.flyouts.example.close')}</Btn>
</BtnToolbar>
}
</form>
</Flyout>
);
}
}
Kopiera mappen src/walkthrough/components/pages/pageWithFlyout/flyouts till mappen src/components/pages/example .
Lägg till den utfällbara menyn på sidan
Ändra src/components/pages/example/basicPage.js för att lägga till den utfällbara menyn.
Lägg till Btn i importen från komponenter/delade och lägg till importer för svgs och ExampleFlyoutContainer:
import {
AjaxError,
ContextMenu,
PageContent,
RefreshBar,
Btn
} from 'components/shared';
import { ExampleGrid } from './exampleGrid';
import { svgs } from 'utilities';
import { ExampleFlyoutContainer } from './flyouts/exampleFlyout';
Lägg till en const-definition för closedFlyoutState och lägg till den i tillståndet i konstruktorn:
const closedFlyoutState = { openFlyoutName: undefined };
export class BasicPage extends Component {
constructor(props) {
super(props);
this.state = { contextBtns: null, closedFlyoutState };
}
Lägg till följande funktioner i klassen BasicPage :
closeFlyout = () => this.setState(closedFlyoutState);
openFlyout = (name) => () => this.setState({ openFlyoutName: name });
Lägg till följande const-definitioner i återgivningsfunktionen :
const { openFlyoutName } = this.state;
const isExampleFlyoutOpen = openFlyoutName === 'example';
Lägg till en knapp för att öppna den utfällbara menyn i snabbmenyn:
<ContextMenu key="context-menu">
{this.state.contextBtns}
<Btn svg={svgs.reconfigure} onClick={this.openFlyout('example')}>{t('walkthrough.pageWithFlyout.open')}</Btn>
</ContextMenu>,
Lägg till text och den utfällbara containern i sidinnehållet:
<PageContent className="basic-page-container" key="page-content">
{t('walkthrough.pageWithFlyout.pageBody')}
{ isExampleFlyoutOpen && <ExampleFlyoutContainer onClose={this.closeFlyout} /> }
<RefreshBar refresh={fetchData} time={lastUpdated} isPending={isPending} t={t} />
{!!error && <AjaxError t={t} error={error} />}
{!error && <ExampleGrid {...gridProps} />}
</PageContent>
Testa den utfällbara menyn
Om webbgränssnittet inte redan körs lokalt kör du följande kommando i roten för din lokala kopia av lagringsplatsen:
npm start
Föregående kommando kör användargränssnittet lokalt på https://localhost:3000/dashboard. Gå till sidan Exempel och klicka på Öppna utfällbara menyflikar.
Nästa steg
I den här artikeln har du lärt dig om de resurser som är tillgängliga för att hjälpa dig att lägga till eller anpassa sidor i webbgränssnittet i acceleratorn fjärrövervakningslösning.
Nu när du har definierat en utfällbara objekt på en sida är nästa steg att lägga till en panel på instrumentpanelen i webbgränssnittet för fjärrövervakningslösningsacceleratorn.
Mer konceptuell information om acceleratorn fjärrövervakningslösning finns i Arkitektur för fjärrövervakning.