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();

JavaScript API Reference

View: http://localhost:8080/archibus/schema/ab-products/solutions/programming/timeline/ab-ex-timeline.axvw