How should I get JSGridControl using Javascript in SharePoint 2013? - sharepoint

I’ve tried the ‘hook’ as shown below and found in other posts:
ExecuteOrDelayUntilScriptLoaded(function()
{
var oldGanttControl = SP.GanttControl;
SP.GanttControl = function()
{
oldGanttControl.call(this);
var oldInit = this.Init;
this.Init = function(jsGridControl, jsRawGridData, params)
{
oldInit.call(this, jsGridControl, jsRawGridData, params);
DoCustomizations(jsGridControl);
};
};
},"SPGantt.js");
Function DoCustomizations(grid)
{
//etc etc
}
However this seems to work only for SP2010. With SP2013 I get an error saying:
“SCRIPT438: Object doesn’t support property or method ‘WaitForGanttCreation’
sp.ui.timeline.debug.js, line 3335 character 13″
Is there a solution for this to work on a Gantt View in SP2013 ?
Any help would be greatly appreciated.

Try that:
ExecuteOrDelayUntilScriptLoaded(function()
{
var oldGanttControl = SP.GanttControl;
SP.GanttControl = function() {
oldGanttControl.call(this);
var oldInit = this.Init;
this.Init = function(jsGridControl) {
oldInit.apply(this, arguments);
DoCustomizations(jsGridControl);
};
for (prop in oldGanttControl) {
if (oldGanttControl.hasOwnProperty(prop)) {
SP.GanttControl[prop] = oldGanttControl[prop];
}
}
};
},"SPGantt.js");
Function DoCustomizations(grid)
{
//etc etc
}

Related

pasting the elements multiple times in rappid js

I am using joint js and rappid with the angular 8 and I have done most of the tasks but in using keyboard events there seems to be a issue. When I copy an element and pasted it on graph it works fine. But for the next element selected it is pasting that new element multiple times.
Here is my code.
var keyboard = this.keyboard = new joint.ui.Keyboard();
var clipboard = this.clipboard = new joint.ui.Clipboard();
selection.collection.on('reset add remove', this.onSelectionChange.bind(this));
paper.on('element:pointerdown', function(elementView: joint.dia.ElementView,evt: joint.dia.Event) {
clipboard.clear();
keyboard.on({
'ctrl+c': function(evt) {
selection.collection.reset();
//clipboard.clear();
selection.collection.add(elementView.model);
clipboard.copyElements(selection.collection, paper.model);
//console.log(clipboard);
},
'ctrl+v': function(evt) {
//console.log(clipboard);
var pastedCells = clipboard.pasteCells(graph, {
translate: { dx: 20, dy: 20 },
useLocalStorage: true
});
var elements = _.filter(pastedCells, function(cell) {
return cell.isElement();
});
//console.log(elements);
// Make sure pasted elements get selected immediately. This makes the UX better as
// the user can immediately manipulate the pasted elements.
selection.collection.reset(elements);
},
});
});
onSelectionChange() {
const { paper, selection,clipboard } = this;
const { collection } = selection;
//console.log(collection.models.child);
// collection.models.forEach(function(model: joint.dia.Element) { if(!model.collection) { clipboard.clear();}});
paper.removeTools();
joint.ui.Halo.clear(paper);
joint.ui.FreeTransform.clear(paper);
joint.ui.Inspector.close();
if(collection.first() == undefined){
clipboard.clear();
}
if (collection.length === 1) {
var primaryCell = collection.first();
var primaryCellView = paper.requireView(primaryCell);
selection.destroySelectionBox(primaryCell);
this.selectPrimaryCell(primaryCellView);
} else if (collection.length === 2) {
collection.each(function(cell) {
selection.createSelectionBox(cell);
});
}
}
selectPrimaryCell(cellView) {
var cell = cellView.model
if (cell.isElement()) {
this.selectPrimaryElement(cellView);
} else {
this.selectPrimaryLink(cellView);
}
//this.createInspector(cell);
}
selectPrimaryElement(elementView) {
var element = elementView.model;
console.log(element.collection);
new joint.ui.FreeTransform({
cellView: elementView,
allowRotation: false,
preserveAspectRatio: !!element.get('preserveAspectRatio'),
allowOrthogonalResize: element.get('allowOrthogonalResize') !== false
}).render();
}
I have different thing like resetting the clipboard , resetting the selection and resetting the keyboard but nothing seems to be working.

NetSuite SuiteScript 2.0 disable field based on checkbox

I apologize if this is a dumb question, but I am new to NetSuite, and have noticed that their documentation is absolutely ridiculously horrifyingly and atrociously disgusting. All humor and bitterness aside though, I can't find the details that should exists in SuiteAnswers. I can find the type Field or Record, but it doesn't show me the options available for those types. It just shows what methods to call to return a field or record.
So I have it on the fieldChanged event as the training specifies, and below is what I have.
function fieldChanged(context) {
debugger;
var customer = context.currentRecord
if (context.fieldId == 'custentity_apply_coupon') {
var field = record.getField("custentity_apply_coupon");
if (record.getValue("custentity_apply_coupon") == true) {
reord.getField("custentity_coupon_code").isDisabled = false;
}
else{
reord.getField("custentity_coupon_code").isDisabled = true;
}
field.isDisabled = false;
}
}
Turns out that, and I never found this in the documentation, that once you get the field from currentRecord.currentRecord, you can set it to disabled via field.isDisabled. Took me forever to find out that isDisabled was a property of field, and then took a complete guess to see that isDisabled was a get/set call for ClientSide Scripts. Below is the code that ended up working.
function fieldChanged(scriptContext) {
var customer = scriptContext.currentRecord;
if(scriptContext.fieldId == "custentity_sdr_apply_coupon"){
debugger;
var field = customer.getField("custentity_sdr_coupon_code");
field.isDisabled = !customer.getValue(scriptContext.fieldId);
if(field.isDisabled){
customer.setValue(field.id, "");
}
}
}
I hope this will help.
function fieldChanged(context) {
var currentRecord = context.currentRecord;
var approvalChkBox = currentRecord.getValue({
fieldId: 'supervisorapproval'
});
var memoField = currentRecord.getField("memo");
if (approvalChkBox)
memoField.isDisabled = true;
else
memoField.isDisabled = false;
}
Thats a good question, this is the simplest solution you are looking for. use getValue method and isDisabled to meet this requirement. the code is self explanatory. Good Luck.
function fieldChanged(context) {
var record = context.currentRecord;
var fieldname = context.fieldId;
var changedValue = record.getValue(fieldname); //getValue method is the key here
var couponid = record.getField('custentity_kld_coupon_code');
if (fieldname == 'custentity_kld_apply_coupon' && changedValue == true) {
couponid.isDisabled = false; //isDisabled helps you to enable or disable a field
} else {
couponid.isDisabled = true;
}
}
Totally agree. I think the SuiteScript 2.0 Student Guide could've been more helpful if they included a preview of their codes along the way.
For anyone else who is still following along, this code below worked for me. Thanks for everyone else that contributed in this post. Used your codes to create this too. I also included some other codes from the previous exercises (i.e. displaying a message when entering 'x' into the coupon code).
/**
* #NScriptType ClientScript
* #NApiVersion 2.0
*/
define([],
function() {
function fieldChanged (context) {
var customer = context.currentRecord;
if(context.fieldId = 'custentity_sdr_apply_coupon') {
var check = customer.getValue('custentity_sdr_apply_coupon');
var code = customer.getField('custentity_sdr_coupon_code');
if (check == true){
code.isDisabled = false;
} else {
code.isDisabled = true;
}
}
}
function saveRecord(context) {
var customer = context.currentRecord;
var empCode = customer.getValue('custentity_sdr_coupon_code')
if(empCode == 'x') {
alert('Invalid code value. Please try again');
return false;
}
return true;
}
return {
fieldChanged: fieldChanged,
saveRecord: saveRecord,
};
});
var objRec_Curr = scriptContext.currentRecord;
var TransferType = objRec_Curr.getCurrentSublistValue({sublistId:'xxxxxxxxxx', fieldId : 'xxxxxxxxxxxx'});
if(TransferType == 'ABC')
eval("nlapiDisableLineItemField('custpage_sublist_out', 'custpage_out_transfer_location', true)");
else
eval("nlapiDisableLineItemField('custpage_sublist_out', 'custpage_out_transfer_location', false)");

Jasmine : Spying on a function call of another module

I have the following code structure :
const finalCall = require('./final.js');
function Func(){
this.process = {
initCall: function(params, callback){
let proParams;
//processing...
return finalCall(proParams, callback);
}
}
}
Now I need to test if my initCall function correctly processes the params and makes call to finalCall. I need to know how do I create a spy on my finalCall function, so when it gets called, I can track the proParams.
I have tried something like :
const func = new Func();
let proParams = null;
spyOn(func.process.initCall, "finalCall").and.callFake(function(pParams, callback){
proParams = pParams;
});
let params = { };
func.process.initCall(params, null);
expect(func.process.initCall.finalCall).toHaveBeenCalled();
expect(proParams).toEqual('...');
I am missing on what object I can access finalCall, or if there is another way to do so. Thanks in advance.
Finally I found a workaround to my problem. I created a prototype of the function finalCall() in my constructor Const, and put a spyOn on its object.
Solution
Main module:
const finalCall = require('./final.js');
function Func(){
const self = this;
this.process = {
initCall: function(params, callback){
let proParams;
//processing...
return self.finalCall(proParams, callback);
}
}
}
Func.prototype = finalCall;
and in my Spec file:
const func = new Func();
let proParams = null;
spyOn(const, finalCall);
let params = { };
func.process.initCall(params, null);
expect(func.finalCall).toHaveBeenCalled();

per pixel image object detection in fabric js

I have been trying to get the per pixel drag and drop feature working using images with fabric.js like in example on their website: http://fabricjs.com/per-pixel-drag-drop/. I would like the object to be detected when a non transparent part is moused over but if I set perpixeltargetfind to true nothing is detected. I have tried for a while now and even copying the example verbatim while using my own images has not worked. Would really appreciate some help figuring out what I am doing wrong if anyone has experience using this. Thanks.
Here is a link to a js fiddle I have been using: http://jsfiddle.net/ahalbleib/bdofdbqg/
and the code:
var canvas =this.__canvas = new fabric.Canvas('c1',{hoverCursor: 'pointer',
selection: false});
var urls=['https://dl.dropboxusercontent.com/s/ix6mvv49wnx226a/Central-Richmon_clipped_rev_1.png?dl=0' ,
'https://dl.dropboxusercontent.com/s/jjp2l0kgdw8iitb/Laurel-Heights.png?dl=0',
'https://dl.dropboxusercontent.com/s/wdk02w40z1466g5/LoneMountain.png?dl=0',
'https://dl.dropboxusercontent.com/s/t6tnptndu2k22xr/OuterRichmond.png?dl=0',
'https://dl.dropboxusercontent.com/s/tv4rhwjc0nw35iz/Presidio-Heights.png?dl=0' ,
'https://dl.dropboxusercontent.com/s/ttbf390w2vdx4id/Inner-richmond.png?dl=0'];
for (var i=0; i<urls.length; i++){
fabric.Image.fromURL( urls[i], function(img){
img.perPixelTargetFind = true;
img.targetFindTolerance = 4;
img.hasControls = img.hasBorders = false;
canvas.add(img);
});
}
canvas.findTarget = (function (originalFn) {
return function () {
var target = originalFn.apply(this, arguments);
if (target) {
if (this._hoveredTarget !== target) {
canvas.fire('object:over', { target: target });
if (this._hoveredTarget) {
canvas.fire('object:out', { target: this._hoveredTarget });
}
this._hoveredTarget = target;
}
}
else if (this._hoveredTarget) {
canvas.fire('object:out', { target: this._hoveredTarget });
this._hoveredTarget = null;
}
return target;
};
})(canvas.findTarget);
};
init();
That is because you don't take images from your own server and you'll get a Security error about tainted canvas. You need to set crossOrigin: 'Anonymous' to images. I made you a jsFiddle

FabricJS double click on objects

I am trying to perform a special action whenever the user double clicks any object located inside the canvas. I have read the docs and not found any mouse:dblclick-like event in the documentation. I tried doing something like:
fabric.util.addListener(fabric.document, 'dblclick', callback);
Which does trigger the dblclick event but does not give specific information about the actual object that is being clicked on the canvas.
Any ideas of the most FabricJS-y way of doing this?
The more elegant way is to override fabric.Canvas._initEventListeners to add the dblclick support
_initEventListeners: function() {
var self = this;
self.callSuper('_initEventListeners');
addListener(self.upperCanvasEl, 'dblclick', self._onDoubleClick);
}
_onDoubleClick: function(e) {
var self = this;
var target = self.findTarget(e);
self.fire('mouse:dblclick', {
target: target,
e: e
});
if (target && !self.isDrawingMode) {
// To unify the behavior, the object's double click event does not fire on drawing mode.
target.fire('object:dblclick', {
e: e
});
}
}
I've also developed a library to implement more events missed in fabricjs : https://github.com/mazong1123/fabric.ext
This is similar to #LeoCreer's answer but actually gets access to the targeted object
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (e) {
var target = canvas.findTarget(e);
});
The Correct way to add custom events to Fabric.js
window.fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (event, self) {
yourFunction(event);
});
or use fabric.ext
I'm using this workaround:
var timer = 0;
canvas.item(0).on('mouseup', function() {
var d = new Date();
timer = d.getTime();
});
canvas.item(0).on('mousedown', function() {
var d = new Date();
if ((d.getTime() - timer) < 300) {
console.log('double click')
}
});
Here is a quick and easy way to add a double click event handler to Fabric JS -
Include following code snippet to your html file. Just ensure this is loaded after the main fabric.js library
<script type="text/javascript">
fabric = (function(f) { var nativeOn = f.on; var dblClickSubscribers = []; var nativeCanvas = f.Canvas; f.Canvas = (function(domId, options) { var canvasDomElement = document.getElementById(domId); var c = new nativeCanvas(domId, options); c.dblclick = function(handler) { dblClickSubscribers.push(handler) }; canvasDomElement.nextSibling.ondblclick = function(ev){ for(var i = 0; i < dblClickSubscribers.length; i++) { console.log(ev); dblClickSubscribers[i]({ e :ev }); } }; return c; }); return f; }(fabric));
</script>
Then add this code to listen a double click event:
canvas.dblclick(function(e) {
});
To get information about the actual object that is being clicked on the canvas, use following method -
canvas.getActiveObject();
eg.
canvas.dblclick(function(e) {
activeObject = canvas.getActiveObject();
});
I am late but now fabricjs has mousedblclick event.
Listed at: http://fabricjs.com/docs/fabric.Object.html
See all events:
http://fabricjs.com/events

Resources