I’ve got a few projects on the go where I’ll be needing someone to create javascript static resources for me. Currently have the need for the following:
Custom field renderer for Skype calls
- href as per this format “skype:(555) 555-1234”
- update a field value in another model on click
Currently looking for approx. 2-5 hours a week.
This requirement has been met. Thanks Barry.
Currently have field renderer making the href. Need to add the ability to update a specific field value within my “SkuidPageSettings” model and “Checked__c” field.
This model is based on a custom setting, so it will only ever have one row. The model will never be saved, so it will always start off being checked.
Here is my next requirement.
Hey Pat -
Figured I would round out the effort for you. Please note that the below is very primitive, not thoroughly tested, not built with performance in mind and has a lot of room for improvement (emphasis on the “a lot” part). That said, it should give you a baseline from which to build on. It leverages the action framework, automatically saves the changes and reorders the list after every click. Saving is required in order to re-sort the list. Depending on your use case, you can adjust of course.
Skuid Team - It appears that save models does not re-render the table component, however a call to requery models does. I even tried forcing a “render()” on the component but that didn’t do it. Seems like it requires an updateData call. I didn’t look in to it too closely but not sure if this is intended behavior?
To use the below, create a new SFDC object called “TestLineNumberMove” with a Name set to auto-number and a single numeric (18,0) field called LineNumber. Then, add a few records to the object and load up the skuid page using preview.
<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="PO__c"> <models>
<model id="TestLineNumberMove" limit="20" query="true" createrowifnonefound="false" sobject="TestLineNumberMove__c" doclone="" type="" orderby="LineNumber__c">
<fields>
<field id="Id"/>
<field id="Name"/>
<field id="LineNumber__c"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skootable showconditions="true" showsavecancel="true" searchmethod="client" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="TestLineNumberMove" buttonposition="" mode="read" uniqueid="TestLineNumberMoveTable">
<fields>
<field id="Id" valuehalign="" type=""/>
<field id="Name" valuehalign="" type=""/>
<field id="LineNumber__c" decimalplaces="" valuehalign="" type="" allowordering="true"/>
</fields>
<rowactions>
<action type="edit">
<drawer title="Drawer Area" width="800" closehandle="true">
<components/>
</drawer>
</action>
<action type="delete"/>
<action type="multi" label="Move Up" icon="ui-silk-arrow-up">
<drawer title="Drawer Area" width="800" closehandle="true">
<components/>
</drawer>
<renderconditions logictype="and"/>
<actions>
<action type="custom" snippet="moveUp">
<onerroractions>
<action type="blockUI" message="Can't move item - already at top/bottom or gap found" timeout="3000"/>
</onerroractions>
</action>
<action type="blockUI" message="Reordering..."/>
<action type="save" rollbackonanyerror="true">
<models>
<model>TestLineNumberMove</model>
</models>
<onerroractions>
<action type="blockUI" message="There was an error" timeout="3000"/>
</onerroractions>
</action>
<action type="requeryModel" snippet="reSortList" model="TestLineNumberMove" behavior="standard"/>
<action type="unblockUI"/>
</actions>
</action>
<action type="multi" label="Move Down" icon="ui-silk-arrow-down">
<drawer title="Drawer Area" width="800" closehandle="true">
<components/>
</drawer>
<renderconditions logictype="and">
<rendercondition type="fieldvalue" operator="!=" enclosevalueinquotes="false" fieldmodel="POItem" sourcetype="fieldvalue" sourceproperty="isNew" field="LineNumber__c" value="0.0"/>
</renderconditions>
<actions>
<action type="custom" snippet="moveDown">
<onerroractions>
<action type="blockUI" message="Can't move item - already at top/bottom or gap found" timeout="3000"/>
</onerroractions>
</action>
<action type="blockUI" message="Reordering..."/>
<action type="save" rollbackonanyerror="true">
<models>
<model>TestLineNumberMove</model>
</models>
<onerroractions>
<action type="blockUI" message="There was an error" timeout="3000"/>
</onerroractions>
</action>
<action type="requeryModel" model="TestLineNumberMove" behavior="standard"/>
<action type="unblockUI"/>
</actions>
</action>
</rowactions>
<massactions usefirstitemasdefault="true"/>
<views>
<view type="standard"/>
</views>
<searchfields/>
</skootable>
</components>
<resources>
<labels/>
<css/>
<javascript>
<jsitem location="inline" name="moveItems" cachelocation="false" url="">(function(skuid){
// get a shorthand to jquery
var $ = skuid.$;
// define a helper function to find the row we are going to swap with
var findRow = function(model, lineNumToFind) {
var counter = 0;
// loop through all the rows in the model (model.data)
// and try to locate the row that has the LineNumber we want to
// move to
while (counter &lt; model.data.length) {
var row = model.data[counter];
if (row.LineNumber__c === lineNumToFind) {
// we found the row so no need to make 'em wait any longer
return row;
}
// move to the next row
counter++;
}
// we didn't find any row with a line number that we want to move to
// this means we are at the top, the bottom of there is a gap
// between line numbers
// TODO: should probably handle gaps
return null;
};
// define a helper function to swap the rows
var moveRow = function(initiatorId, model, row, moveBy) {
var curLineNum = row.LineNumber__c // line number of row that was clicked
, newLineNum = curLineNum + moveBy // line number to change row that was clicked to
, targetRow = findRow(model, newLineNum); // locate row at the target line number
// if we didn't find a row, we log a console message and
// return false to ensure skuid triggers the onerror action
if (!targetRow) {
console.log('Unable to move because top or bottom of list has been reached or item order has a gap.');
return false;
}
// if we found a row, we are going to swap
// create an empty object
var rowsToUpdate = {};
// add a property to the object with a key of the row.Id and an object that contains the
// field name and field value we want to change
rowsToUpdate[row.Id] = { LineNumber__c : newLineNum };
// add a property to the object with the key of the row that we are swapping with and an
// object that contains the fieldname and field value that we want to change
rowsToUpdate[targetRow.Id] = { LineNumber__c : curLineNum };
// call skuid api to update the rows
model.updateRows(rowsToUpdate, { initiatorId : initiatorId });
// return success indicator - this will ensure skuid goes to the next action
return true;
};
// define a snippet that can be called from action framework
skuid.snippet.registerSnippet('moveUp', function(args) {
var eventArg = arguments[0]
, initiatorId = eventArg.initiatorId
, list = eventArg.list
, model = eventArg.model
, row = eventArg.row;
// moving on up...to the eastside (Different Strokes reference, couldn't help myself)
return moveRow(initiatorId, model, row, -1);
});
// define a snippet that can be called from action framework
skuid.snippet.registerSnippet('moveDown', function(args) {
var eventArg = arguments[0]
, initiatorId = eventArg.initiatorId
, list = eventArg.list
, model = eventArg.model
, row = eventArg.row;
// moving on down...nope, no tv show reference for that one
return moveRow(initiatorId, model, row, 1);
});
})(skuid);</jsitem>
</javascript>
</resources>
</skuidpage>
Next Requirement. Swap values vs increment/decrement.
