I'm trying something I'm not 100% is possible to do but wanted to throw the question in case others have attempted it. We are experimenting with the Perspective Scheduler. A big potential GUI goal we have can be broken into a few steps:
Have a table with rows of items that need to be put into the schedule. This is assumed to be working.
Create a new scheduledEvent in the scheduler depending on where the user dropped the row of data. This is the part I'm struggling on. There are a few JS extension scripts tacked onto the perspective scheduler, but these are only triggerable by clicking into a square. Is it possible to, on an onClick event, to know where the mouse is located inside the scheduler? If I could somehow figure out where the mouse is located, perhaps I could locate the start and end date or the itemID needed to create a new scheduledEvent.
I'm assuming when you say Perspective Scheduler, you're talking about the Equipment Schedule component...
There probably is a way to do this pretty easily. I would think the hardest part of accomplishing what you want is the dragging and dropping. The Equipment Schedule component has a props.scheduleEvents property (if I remember correctly) and you'll need to persist that data across sessions. The easiest way to do this is to use a database, of course, which is how I've done it in the past. I suppose you could also create a Dataset or Document tag to hold those schedule events, or use a session custom property. I would think a database would be most useful, since you'll be able to do reporting on current and historical events easier.
Your task 3 becomes trivial - as long as you can trigger an action (ie. when you "drop" the table row onto the schedule), all you'd need to do is to insert a database record and refresh the binding on props.scheduleEvents and your event will appear in the schedule.
Last thing: something that tripped me up when I began using this component are the concepts of scheduleEvents and items - schedule events are your events on the schedule but items are the Lines or Areas you display (the rows on the left side of the Equipment Schedule component).
Apologies for the confusion, yes, I meant the equipment scheduler. These are good pointers, especially with the items. That was confusing me slightly.
I have two issues with the drag and drop capabilities so far. I can't seem to find a good way to trigger an event if a row is dropped into the scheduler. I also want to take into WHERE the user 'drops' the row. This way you could utilize the scheduler's structure. This means somehow getting knowledge of where the cursor is inside the scheduler or some way to trigger the add extension function. Not sure if this is possible.
similar to the script i provided here, you should also be able to add on drop events on the scheduler;
the cells have a attribute data-column and data-row, which you could use to determine where it was dropped (column 0 is start date of the scheduler, row 0 is the first item)
you can probably lso trigger an onclick event on these cells, but it might be tricky to combine this drag and drop and on click event handelrs if you do, probably best to just write the new scheduled event directly into the component. So that perspective can handle the moving and editing.
I have not checked if its easy to trigger an add event. ill have to take a deeper look next week
(not working just what you have to change: )
the selector to appy these 2 event too: .schedule-grid-cell.ia_equipmentScheduleComponent__gridSpace__gridCell
Thanks for the information @victordcq. I'm still fairly green on perspective development, let alone getting fancy with js injection. Would be really happy to see what you could throw together for this if you have the time.
As for an event to tie into, whenever I attempt to drag a row of data into the scheduler component, I cannot get an onClick event to trigger. Or even any event involving the mouse moving. I might just not have a great understanding of what I need to do for the drag to trigger properly. Just to make note, we are on 8.1.21 if we are missing some updates. Thanks for the help.
You can trigger an event using componentEvents. fireComponentEvent
It takes a bit of knowledge to find where to use it...
The problem is you need to fill in the event yourself (you can add whatever) So you will need to calculate the start date using the column id
might need some more insight on how ignition gets the start date, only way i see this to be possible using only info of the frontend is when dateRange prop is filled in, so you can calculate it... you might also have to grab the zoom level i suppsoe
(this is not complete and only half tested)
const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value;
function ondrop(ev) {
ev.preventDefault();
const draggedId = ev.dataTransfer.getData('text');
#the zoom interval (Month, Day, 6 hours ...) use to calcualte the date,
const interval = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.querySelector(".ia_equipmentScheduleComponent__actionBar__dropdown .ia_dropdown__valueSingle").getAttribute("data-label")
#it will be easier to calculute the start/end date in python using the dateRange together with the found interval and column
const addEvent = {'end':'?','start':'?', 'itemId':this.getAttribute('data-row'), 'draggedId ':draggedId, 'interval':interval,'droppedColumn':this.getAttribute('data-column') }
#assuming the schedule is child directly under the root
const scheduleComponent = view.root.childComponents.find((component)=> component.def.meta.name=='EquipmentSchedule')
scheduleComponent.componentEvents.fireComponentEvent('onAddEvent',{'event':addEvent})
};
I actually got the drag and drop feature working, but I did not resolve your issue with the start and end dates completely. I just assumed each cell was one hour. I have been trying to do what you were doing and drill down to the selected interval with this line:
However, I cannot seem to get the markdown to function when adding this. I've been trying to do some JS reading to figure out why that line isn't working, but no luck. If someone finds a way to get access to that selected scale, I will have everything I need to get this project up and running.
I was able to grab the interval and am able to set the start time dynamic to the zoom level. Figured out the issue. However, as you mentioned earlier, the javascript is only applied to the cells that are loaded on the page. Since not all cells are loaded initially, once you scroll around, the drag and drop no longer functions. Is there a way to constantly apply the component binding to trigger whenever a new cell is loaded?
Update: This was something I was trying with my rudimentary JS skills. I was trying to use the testTwo function to print out to the console whenever the scroll bar is used, but the onchange is not working. I just don't know how to latch until a change in the grid object:
yes you can setup a mutation observer that triggers on domchanges
ive done something similar here:
i'll fix up the script i have in a bit
edit: here you go!
a table , a schedule and the markdown are in here, with the dragdrop in de markdown and an (example of) AddEvent in de schedule. tabledropschedule.zip (12.6 KB)