Hi!
I integrated Oracle JET Timeline in an APEX app, following this tutorial: Link
I am using APEX 20.2.
Now, I am trying to include table data to timeline.
Currently, I set data with JS:
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojmenu', 'ojs/ojtimeline'],
function (oj, ko, $)
{
function ViewModel()
{
var self = this;
self.seriesData = [{
id: 'e1',
title: 'ATP VTR Open',
start: new Date('Feb 4, 2013').toISOString(),
end: new Date('Feb 10, 2013').toISOString(),
description: 'Finalist: 3-1'
}, {
id: 'e2',
title: 'ATP Brasil Open',
start: new Date('Feb 11, 2013').toISOString(),
end: new Date('Feb 17, 2013').toISOString(),
description: 'Champion: 4-0'
}, {
id: 'e3',
title: 'ATP Abierto Mexicano Telcel',
start: new Date('Feb 25, 2013').toISOString(),
end: new Date('Mar 2, 2013').toISOString(),
description: 'Champion: 5-0'
}, {
id: 'e4',
title: 'ATP BNP Paribas Open',
start: new Date('Mar 7, 2013').toISOString(),
end: new Date('Mar 17, 2013').toISOString(),
description: 'Champion: 6-0'
}
];
var items = ko.observableArray(self.seriesData)();
self.timelineSeries = [{id: 's1', emptyText: 'No Data.', label:'Oracle Events', items: items}];
self.selectedMenuItem = ko.observable('(None selected yet)');
var itemTitle;
self.beforeOpenFunction = function (event)
{
var target = event.detail.originalEvent.target;
var context = document.getElementById('timeline').getContextByNode(target);
if (context != null && context.subId == 'oj-timeline-item')
{
var itemIndex = context['itemIndex'];
itemTitle = self.seriesData[itemIndex]['title'];
}
};
self.menuItemAction = function (event)
{
var text = event.target.textContent;
if (itemTitle)
{
self.selectedMenuItem(text + ' from ' + itemTitle);
itemTitle = null;
}
else
self.selectedMenuItem(text + ' from timeline background');
};
};
$(
function()
{
ko.applyBindings(new ViewModel(), document.getElementById('timeline-container'));
}
);
}
);
Vinish Kapoor
I can just give an idea. Write the JSON to a page item and then get it as follows:
pavlos
I tried, when I use code from page item (item has computation before header) it works. but, when I reference item:
self.seriesData = $v("PXX_JSON"); I got "No data to display".
pavlos
Thank you Vinish!
I solved problem with JSON.parse($v("PXX_JSON"));