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

Opportunity_withInlineEditablePreview.xml

<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>