Answers.Body: <p>Assuming you have an API that allows to modify the entity you want (if it's a custom one, it's easy to add), adding a few classes should be enough to enable the edit in place. You need to define the entity that contain the field (class crm-entity, id "type-{id}" on a containing dom node and then "crm-editable crmf-{fieldname}". for example:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr class="crm-entity" id="contact-123"&gt;
  
      &lt;!-- textfield (default type) --&gt;
      &lt;td class="crm-editable crmf-first_name"&gt;Fred&lt;/td&gt;
  
      &lt;!-- select list with empty option --&gt;
      &lt;!-- (note: options will be fetched automatically by the api) --&gt;
      &lt;td class="crm-editable crmf-prefix_id"
          data-type="select"
          data-empty-option="{ts}- none -{/ts}"&gt;Mr.&lt;/td&gt;
  
      &lt;!-- yes/no select --&gt;
      &lt;td class="crm-editable crmf-is_deceased" data-type="boolean"&gt;
        No
      &lt;/td&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>More details in the doc</p>
  
  <p><a href="https://docs.civicrm.org/dev/en/latest/framework/ui/#in-place-field-editing" rel="nofollow noreferrer">https://docs.civicrm.org/dev/en/latest/framework/ui/#in-place-field-editing</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-14T13:23:24.637Z
Answers.Text: Thanks. That link is just what I needed. Not sure why I couldn't find it before.
Answers.UserDisplayName: Mike Steigerwald
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-11T09:55:41.503Z
Answers.LastActivityDate: 2018-01-11T09:55:41.503Z
Answers.UserDisplayName: Xavier
Body: <p>Is there a reference anywhere for the in-line editing, e.g., 'Click Here to Edit' in CiviCRM? I need something similar for my extension and want to reuse as much as I can.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-01-09T20:47:20.973Z
Comments.Text: Please elaborate your question a little more and what are you trying to achieve?
Comments.UserDisplayName: Hassan Farooq
Tags: <extension><developer>
Title: How does in-line editing editing work in CiviCRM?
ThreadText: # How does in-line editing editing work in CiviCRM?
  
  (Asked by: username_0 on 2017-10-08)
  
  Is there a reference anywhere for the in-line editing, e.g., 'Click Here to Edit' in CiviCRM? I need something similar for my extension and want to reuse as much as I can.
  
  **Tags:** extension, developer
  
  > **Comments:**
  > **username_1**: Please elaborate your question a little more and what are you trying to achieve?  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2018-01-11. Score: 3 | Accepted answer
  
  Assuming you have an API that allows to modify the entity you want (if it's a custom one, it's easy to add), adding a few classes should be enough to enable the edit in place. You need to define the entity that contain the field (class crm-entity, id "type-{id}" on a containing dom node and then "crm-editable crmf-{fieldname}". for example:
  
    
  
      
      Fred
  
      
      
      Mr.
  
      
      
        No
      
  
    
  
  
  More details in the doc
  https://docs.civicrm.org/dev/en/latest/framework/ui/#in-place-field-editing
  
  > **Comments:**
  > **username_0**: Thanks. That link is just what I needed. Not sure why I couldn't find it before.  
  
  ---
  
  