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
Principle description
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-name | Online Service Monitor |
---|---|
event-icon | https://online-service-monitor.com/icon.png |
event-template | https://online-service-monitor.com/template.vue(html) |
event-api-url | https://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
2.Fill in the api-url address
3.Click to bind
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
2.Select Customize event
3.Fill in the api-url address
4.Click to bind or unbind
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.
Event category
Currently, any component only supports one event binding, and the event has two types:
the system default event, and the custom event.