Allow inline-editing of merge fields in Templates

  • 9
  • Idea
  • Updated 4 years ago
Use case: I have a stylized-content area built with a Template component that shows data in multiple objects in a formatted way, with no field labels or section headings at all. An example would be an Order Form, Quote, or a Purchase Order. I need it to look like my company's printed Order Form or Quote, so that my users can review the form before sending it out to prospects or customers for their signature, perhaps as a PDF via Docusign or just on paper.

However, I'd like my staff to be able to make small tweaks to the Order Form before sending it out --- ideally, they'd be able to inline-edit the contents of the Template component and see what the resultant changes would look like immediately, without having to go back in to a record's detail page.







Photo of Zach McElrath

Zach McElrath, Employee

  • 49,014 Points 20k badge 2x thumb
  • imaginative

Posted 5 years ago

  • 9
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
This would be an extremely valuable feature for us!  It's really an editable document (e.g. PDF) so to speak, a WYSIWYG field editor rather than the stock row/column layout.  The heart of this is having more control over field layout while still maximizing the power of Skuid.  
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Yes please. I want.
Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
Me too please.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
My immediate use case on this is perhaps simpler than Zach's example. I need the template to render as normal, merging in data via the included Mustache tags, then for the resulting merged template to be editable. But I don't need the editing to have the context of the original merge fields. I just need it to be one editable textarea that I can then treat as one string. Es posible?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Thanks Zach, this could have real potential. I knocked up a prototype quickly:



My email composer is in a popup spawned from a row action on a table of contacts. The merging works just fine (I'm just doing the contact's name for now) and the textarea appears editable. But when I click in the textarea I get a weird popup:



Is there something I've got wrong? Here's the XML for my popup:

<popup width="900" title="">   <components>
      <pagetitle model="ClientPeople">
         <maintitle>&lt;span style="font-size: 18px; color: #3cb2e1; margin-bottom: 24px;"&gt;Compose Email&lt;/span&gt;</maintitle>
         <actions>
            <action type="savecancel" window="self"/>
         </actions>
         <conditions>
            <condition type="contextrow" field="Id" autocreated="true"/>
         </conditions>
      </pagetitle>
      <basicfieldeditor showheader="true" showsavecancel="false" mode="edit" model="ClientPeople">
         <conditions>
            <condition type="contextrow" field="Id" autocreated="true"/>
         </conditions>
         <columns>
            <column width="100%">
               <sections>
                  <section title="">
                     <fields>
                        <field xmlns="http://www.w3.org/1999/xhtml"; id="pfdev1__From_Person__c">
                           <label>To</label>
                        </field>
                        <field type="COMBO" allowhtml="true">
                           <label>Subject</label>
                           <template>&lt;textarea id="EmailSubject"&gt;Your contract&lt;/textarea&gt;</template>
                        </field>
                        <field type="COMBO" allowhtml="true">
                           <label>Body</label>
                           <template>&lt;textarea id="EmailBody"&gt;Hi {{{pfdev1__From_Person__r.Name}}},
Wanted to let you know that your contract with us is due on . Please get in touch.&lt;/textarea&gt;</template>
                        </field>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
   </components>
</popup>
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
Try marking the Template Component as "Read-Only". 
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
That worked! I don't necessarily understand why, but that needn't slow us up. So we have a read-only template containing a textarea that appears within a field editor that's set to edit mode, and it works. Great!

Another quick question (must be just about clocking off time for you). What does EmailUtils refer to?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
EmailUtils.sendEmail() is just an example of how you could define an Apex method that performs your email sending logic using JavaScript Remoting such that you could call it from your skuid page. Just a stub --- actually doing this is the subject of other tutorials / posts.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Gotcha. Makes sense.