Chapter 13: Live Edit

This is one of Curry's interesting features. Live edit allows you to edit content from the front end where it is rendered. You must be logged in to the CMS and should have edit permissions for this to work. Below is a screenshot of a project which is being live edited.

Let's try to live edit the module that displays a list of companies on the Demo -> Companies page (demo/companies/).

Enable live edit

You can enable or disable live edit from the System settings. If you do not want certain placeholders or module targets to be live edited you can specify them in the Exclude placeholders text box. You need to specify one placeholder per line. Excluding a placeholder prevents the content editor from accidentally adding unwanted modules to the page.

When live edit is enabled and you are logged in to Curry, you should see a small black button displayed in the top right corner of your website. Click the button to switch to live edit mode. Module placeholders are now displayed.

Notice that the cog icon is shown for some modules and not shown for others. The modules for which the cog is not shown do not have sufficient edit permissions. For e.g. the Navigation module has content visibility set to "Never". The CompanyList module also has content visibility set to "Never". Go to the Demo / Companies page in the backend and set the content visibility for the CompanyList module to Page only. You can do this by editing the Properties for the module. Now refresh the front end and you should see a cog icon () showing.

Live edit a custom module

When you click the "Edit" menu item, you will get a message informing you that the CompanyList module does not have a backend. This is true because the Project_Module_CompanyList module does not indeed have a backend defined; i.e. showBack() is not defined.

We would like to show Project_Backend_Companies instead of Project_Module_CompanyList when we click the Edit link. Furthermore, for each item in the list we would like to show the respective edit form.

The getInlineCommands function

Every page module allows you to override or add new commands to the live edit menu with the getInlineCommands method. This method takes one argument which is an array of commands. An item in the commands array has the following prototype:

$commands[<cmd_id>] = array(
  'Url' => <the url>,
  'Name' => <menu title>,
);

The cmd_id is the key or the identifier for the command. It's a string type value. The Url will probably be the URL to a backend module.

Add the following code to the Project_Module_CompanyList module:

public function getInlineCommands($commands)
{
    $commands['edit']['Url'] = (string) url('admin.php', array(
      'module' => 'Project_Backend_Companies',
    ));
    return $commands;
}

We have made live edit load the Project_Backend_Companies module instead when we click the Edit menu link.

For the second part of the specifications, we need to edit the attached module template. Edit the template in templates/Modules/CompanyList.twig as follows:

<ul data-module-id="{{ module.Id }}">
    {% for company in query %}
    {% set item = company.PrimaryKey %}
    {% ia module='Project_Backend_Companies',action='edit',item=item %}
    <li>{{ company.Name }}, agreements: {{ company.NbrAgreements }}
    {% if company.AgreementQuotes %}
        <ul>
            {% for q in company.AgreementQuotes %}
            <li>Quote: {{ q.Heading }}</li>
            {% endfor %}
        </ul>
    {% endif %}
    </li>
    {% endia %}
    {% endfor %}
</ul>

We enclose each list item within an {% ia %} ... {% endia %} Twig block. The ia means Inline Admin. Remember that the Backend is also know as Admin interface. We use these terms interchangeably. Hence, enclosing an item within the {% ia %} block informs Curry to iframe a module.

The parameters of the {% ia %} tag are the URL query parameters passed to admin.php.