Use the timeline control
Use the timeline control
Technologies > Software Engineering Techniques > Software Engineer Views > Form Using the Timeline Control
The timeline control uses the following js libraries, which must be included in the AXVW:
<js file="yahoo-dom-event.js"/>
<js file="ab-timeline-model.js"/>
<js file="ab-timeline-controller.js"/>
The timeline appears inside an
html
panel:
<panel type="html" id="exTimeline_timelinePanel" layoutRegion="timelineRegion">
<title>Timeline: Click and Drag to create new events</title>
<html>
<div id="timeline" style="height:400px;"></div>
</html>
</panel>
Create an instance of the timeline control in JavaScript, passing the div id, and add event listeners to the timeline:
this.timeline = new Ab.timeline.TimelineController('timeline', true);
this.timeline.
addOnClickEvent
(this.timeline_onClickEvent.createDelegate(this));
...
add additional event listeners
Add custom timeline columns using
addColumn()
:
this.timeline. addColumn ('room', 'Room ID', 'text');
Load the timeline, calling a workflow rule which returns the timeline object model, including timemarks and all existing reservations for specified date, time range and list of room PKs:
var result = Workflow.callMethod('AbSolutionsViewExamples-TimelineExamples-loadTimeline',
roomArrangeId, buildingId, '2008-05-31', '08:00:00', '20:00:00');
this.timeline.clearRowBlocks();
this.timeline.loadTimelineModel(result.data);
this.timeline.refreshTimelineUI();
View: http://localhost:8080/archibus/schema/ab-products/solutions/programming/timeline/ab-ex-timeline.axvw