Events Template Definition

Event Operation Guideline


concept

Diagram: a diagram created by the user via snapano

Component: Each component on the Diagram, drag an element into the right canvas from the component library on the left side of the editing page.

Event: An optional binding event trigger configuration on the Component.

The user displays the event status and event content on each component by adding events on the diagram

img

Principle description

img

Event format

An event is a set of event properties used to bind to each component for event monitoring or configuration checking of each component.

Each event format contains the following:

event-nameOnline Service Monitor
event-iconhttps://online-service-monitor.com/icon.png
event-templatehttps://online-service-monitor.com/template.vue(html)
event-api-urlhttps://online-service-monitor.com/data.json
  • event-name:The name of the event, the system event is a fixed name and cannot be modified, custom events can define their own event names, system events and custom events, please check the event classification description.
  • event-icon:event list drop-down menu display
  • event-template:the diagram show the event page content displayed to the user when the data changes, the system event has a fixed format, custom events, and the user can define the event page content self
  • event-api-url:The api interface used to request whether there is an event change in the current component. The returned data contains the status, and the diagram will display the Event template conent according to the status value.

Description:

System event :Select event and binding

the user only needs to select the event name to be Bind, fill in the api-url address that triggers the event to return status

1.Select event

img

2.Fill in the api-url address

img

3.Click to bind

img

Customize event :Create Customizee evnet , Select the event and binding

The user needs to create a custom event firstly , fill in the event name, event icon, and event content template

1.Create Customize event

img

2.Select Customize event

img

3.Fill in the api-url address

img

4.Click to bind or unbind

img

Bind event / unBind event:

After the component completes binding/unbinding, the component will display/not display the binding state.

There will be an icon on the bound component to indicate that the current component has a binding event.

After clicking, the user can view the current binding in the properties.

img

Event category

Currently, any component only supports one event binding, and the event has two types:

the system default event, and the custom event.

Event case