Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save zachelrath/2451cedc9221927e96dd to your computer and use it in GitHub Desktop.
Save zachelrath/2451cedc9221927e96dd to your computer and use it in GitHub Desktop.
An Opportunity detail page with a popup that lets you use a prototype Skuid markup language feature within "fragments" of HTML code to generate inline-editable Skuid Ui Fields
<skuidpage showsidebar="true" showheader="true" tabtooverride="Opportunity">
<models>
<model id="Opportunity" limit="1" query="true" createrowifnonefound="false" sobject="Opportunity">
<fields>
<field id="Name"/>
<field id="CreatedDate"/>
<field id="CloseDate"/>
<field id="Amount"/>
</fields>
<conditions>
<condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
</conditions>
</model>
<model id="LineItems" limit="20" query="true" createrowifnonefound="false" sobject="OpportunityLineItem">
<fields>
<field id="Discount"/>
<field id="ServiceDate"/>
<field id="PricebookEntry.Product2Id"/>
<field id="PricebookEntry.Product2.Name"/>
<field id="ListPrice"/>
<field id="UnitPrice"/>
<field id="TotalPrice"/>
<field id="Quantity"/>
<field id="Description"/>
</fields>
<conditions>
<condition type="modelmerge" value="" field="OpportunityId" operator="=" model="Opportunity" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
</conditions>
</model>
</models>
<components>
<pagetitle model="Opportunity">
<maintitle>
<template>{{Name}}</template>
</maintitle>
<subtitle>
<template>{{Model.label}}</template>
</subtitle>
<actions>
<action type="popup" label="PDF Preview">
<popup title="PDF Preview" width="800">
<components>
<custom name="PDF_Preview"/>
</components>
</popup>
</action>
<action type="savecancel" window="self"/>
</actions>
</pagetitle>
<basicfieldeditor showsavecancel="false" showheader="true" model="Opportunity" mode="read">
<columns>
<column width="50%">
<sections>
<section title="Basics">
<fields>
<field id="Name"/>
<field id="CloseDate"/>
<field id="Amount"/>
</fields>
</section>
</sections>
</column>
<column width="50%">
<sections>
<section title="System Info">
<fields>
<field id="CreatedDate"/>
</fields>
</section>
</sections>
</column>
</columns>
</basicfieldeditor>
<skootable showconditions="true" showsavecancel="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="LineItems" buttonposition="" mode="read">
<fields>
<field id="PricebookEntry.Product2Id"/>
<field id="Quantity"/>
<field id="UnitPrice"/>
<field id="ServiceDate"/>
<field id="Description"/>
<field id="TotalPrice"/>
</fields>
<rowactions>
<action type="edit"/>
<action type="delete"/>
</rowactions>
<massactions usefirstitemasdefault="true"/>
<views>
<view type="standard"/>
</views>
</skootable>
</components>
<resources>
<labels/>
<css/>
<javascript>
<jsitem location="inline" name="PageFragmentJS" cachelocation="false" url="">(function(skuid){
var $ = skuid.$,
utils = skuid.utils;
window.jf = {};
var jf = window.jf;
//Use jQuery to create a portion of the dom. Elements with the data-elemid attribute
//will be given references in the returned object. This is useful for creating large
//dom sections in javascript while still having references to internal dom elements
jf.makePageFragment = function(html) {
var rootElem = $(html);
var fragObj = { 'root' : rootElem };
// Find all data attributes to return references to their fragments.
rootElem.find('[data-elemid]').each(function(){
var obj = $(this);
fragObj[obj.data('elemid')] = obj;
});
rootElem.find('[data-role]').each(function(){
var obj = $(this);
if (obj.is('[data-role="field"]')) {
var fieldName = obj.data('field');
var model = skuid.model.getModel(obj.data('model'));
var row = model.getFirstRow();
var skuidField = jf.makeEditField({
fieldId: fieldName,
row : row,
model : model,
width : obj.data('width'),
type : obj.data('type'),
//required : obj.data('required'),
placeholder : obj.data('placeholder'),
template : obj.data('displaytemplate'),
mode : obj.data('mode'),
filters : obj.data('lookupfilters'),
});
var input = skuidField.element.find(':input');
var inputid;
// Add Ids to the input elements
if (obj.data('id')) {
inputid = obj.data('id');
} else {
inputid = fieldName;
}
if (!input.is('.hasDatepicker')) {
input.prop('id',inputid);
}
if (input.is('[type="checkbox"]')) {
input.after('&lt;label for="' + inputid + '"&gt;' + (obj.data('placeholder') || model.fieldsMap[fieldName].label) + '&lt;/label&gt;');
}
skuidField.element.appendTo(obj);
}
});
var editField = function(inputfield) {
// Get all fields in our fragment
var fields = rootElem.find('.nx-field');
console.log('fields');
console.log(fields);
// Loop over all fields and if they were in edit mode, re-draw them in
// read mode.
$.each(fields,function() {
var field = $(this).data('object');
if (field &amp;&amp; field.mode === 'edit') {
field.mode = 'read';
field.render();
}
});
// If the user clicks away from a field in edit mode, re-draw it in
// read mode.
utils.registerBlurHandler(inputfield,function() {
var field = inputfield.data('object');
if (field &amp;&amp; (field.disableBlur !== true)) {
field.mode = 'read';
field.render();
}
});
var field = inputfield.data('object');
field.mode = 'edit';
field.render();
var firstInput = field.element.find(':input').first();
firstInput &amp;&amp; firstInput.focus();
};
var isEditable = function(fieldItem){
var fieldobject = fieldItem.data('object');
return fieldobject &amp;&amp; fieldobject.editable!==false &amp;&amp; fieldobject.editable!==null &amp;&amp; fieldobject.mode!=='readonly';
};
// Set up the edit hovers
rootElem.on('mouseenter mouseleave','.nx-fieldtext',function( hoverevent ) {
var fielditem = $(this).parent();
if (hoverevent.type === 'mouseenter') {
if (isEditable(fielditem)) {
$(this).append($('&lt;div&gt;').addClass('nx-edithover ui-silk-pencil ui-silk inline').css('margin-top','2px').click(function(clickevent) {
editField(fielditem);
clickevent.stopPropagation();
}));
}
} else {
$(this).find('div.nx-edithover').remove();
}
});
rootElem.on('dblclick','.nx-fieldtext',function( event ) {
if (isEditable($(this).parent())) editField($(this).closest('.nx-field'));
});
// Set up the click to edit events
rootElem.on('focus','.nx-fieldtext .focusbox',function() {
var focusbox = $(this);
if (!focusbox.attr('preventaction')) {
if (isEditable($(this).parent())) editField(focusbox.closest('.nx-field'));
}
});
return fragObj;
};
// Creates and binds a skuid field to a model.
jf.makeEditField = function(configuration) {
options = $.extend({
mode : 'edit'
},configuration || {});
options.noneLabel = options.placeholder;
var fieldId = options.fieldId;
var newfield = new skuid.ui.Field(
options.row,
options.model,
options.editor,
{
fieldId : fieldId,
mode : options.mode,
//required : options.required,
type : options.type,
noneLabel : options.noneLabel,
template: options.template,
filters: options.filters,
register: true
}
);
newfield.render();
newfield.element.css({'display':'inline-block','margin-bottom':'12px'});
if (!options.isLastItem) {
newfield.element.css('margin-right','12px');
}
var inputelem = newfield.element.find(':input');
if (options.width) {
newfield.element.css('width',options.width + 'px');
}
var fieldInfo = options.model.getField(fieldId);
inputelem.prop('placeholder',options.placeholder || (fieldInfo &amp;&amp; fieldInfo.label));
if (options.required || (fieldInfo &amp;&amp; fieldInfo.required)) {
if (options.required !== false &amp;&amp; options.showdots) {
inputelem.prop('placeholder',(options.placeholder || (fieldInfo &amp;&amp; fieldInfo.label)) + ' *');
}
}
return newfield;
};
})(skuid);</jsitem>
<jsitem location="inlinecomponent" name="PDF_Preview" cachelocation="false" url="">var element = arguments[0],
$ = skuid.$;
var template = '&lt;div&gt;Name: &lt;div data-role="field" data-model="Opportunity" data-field="Name" data-mode="read" style="display:inline-block;" data-elemid="OppNameRead"/&gt;&lt;/div&gt;'
+ '&lt;div&gt;Amount: &lt;div data-role="field" data-model="Opportunity" data-field="Amount" data-mode="edit" style="display:inline-block;"/&gt;&lt;/div&gt;';
var fragment = jf.makePageFragment(template);
element.html(fragment.root);
</jsitem>
</javascript>
</resources>
</skuidpage>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment