Skip to content

Instantly share code, notes, and snippets.

@zachelrath

zachelrath/Opportunity_withInlineEditablePreview.xml

Created May 7, 2014 18:03
Download ZIP

Revisions

  1. Zach McElrath renamed this gist May 7, 2014. 1 changed file with 0 additions and 0 deletions.
    0 Opportunity_withInlineEditablePreview → Opportunity_withInlineEditablePreview.xml
    View file
    File renamed without changes.
  2. Zach McElrath created this gist May 7, 2014.
    282 changes: 282 additions & 0 deletions Opportunity_withInlineEditablePreview
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,282 @@
    <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>