Hello dear Couchies!

I want to share a nice recipe how to make a new Couch 1.4 feature "Inline editing" more useful with adding DataBound functionality.

The task was:
Admin creates a new Article in the Admin Panel without content. This article is invisible for visitors, but is visible for Admin in folder-view and page-view so he could write the text using Inline editor on the page. And here is a button "Publish" to make the page visible for visitors.

So, the visitor see in folder-view:

Article 1
Content for article one

Article 3
Content for article three

And the Admin see:

Article 1 [published]
Content for article one

Article 2 [Unpublished] [a]Publish it?[/a]
Test content for article two

Article 3 [published]
Content for article three

Of course, Admin can go to "Article 2" page and edit it using Inline editor (so glad that Couch 1.4 now has it!)

Let's start with a Page-view. It's preconfigured with Inline tags (see official Docs how to use it).
Code: Select all
<h1<cms:inline_edit 'k_page_title' /> ><cms:show k_page_title /></h1>
<p<cms:inline_edit 'content' /> ><cms:show content /></p>

Let's add to the template a checkbox for the "Unpublished" state. Of course, it can be done without it using just access levels, but my recipe is much more flexible.
Code: Select all
<cms:editable name="only_admin" label="Only admin can see it?" opt_values='Yes=1' type='checkbox' />

And add a Publish button using DataBound:
Code: Select all
<cms:if k_user_access_level ge '7'>
   <cms:form class="edit-publish-<cms:if only_admin >off<cms:else />on</cms:if>" masterpage=k_template_name mode='edit' page_id=k_page_id method='post' anchor='0' >
      <cms:if k_success >
         <cms:db_persist_form />
         <cms:redirect k_page_link />
      </cms:if>
      <cms:input name="only_admin" type="bound" onchange="this.form.submit()" value="" />
   </cms:form>
</cms:if>

Now we have a form with class "edit-publish-off" if we have checked a checkbox, and "edit-publish-on" if unchecked. And an input with auto-submit function. Below are some CSS styles that hide <input> tag and text - I use this trick for creating NoJS CSS tabs also:
Code: Select all
.edit-publish-off,
.edit-publish-on {
  position: absolute;
  z-index: 999;
  right: 0;
  top: 0;
}
.edit-publish-off label,
.edit-publish-on label {
  display: block;
  cursor: pointer;
  text-indent: -9999px;
  width: 16px;
  height: 16px;
  font-size: 1px;
  background: #ff3c00;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
.edit-publish-off input,
.edit-publish-on input {
  display: none;
}
.edit-publish-on label {
  background: #3cb9c8;
}

Now some complexity about folder-view.
Code: Select all
<cms:pages folder=k_folder_name custom_field="<cms:if k_user_access_level lt '7'>only_admin != 1</cms:if>">
   <article>
      <cms:if k_user_access_level ge '7'>
         <cms:form class="edit-publish-<cms:if only_admin >off<cms:else />on</cms:if>" masterpage=k_template_name mode='edit' page_id=k_page_id method='post' anchor='0' >
            <cms:if k_success >
               <cms:db_persist_form />
               <cms:redirect k_folder_link />
            </cms:if>
            <cms:input name="only_admin" type="bound" onchange="this.form.submit()" value="" />
         </cms:form>
      </cms:if>
      <h1><cms:show k_page_title /></h1>
      <p><cms:show content /></p>
   </article>
</cms:pages>

In the article body I included the same "Publish" button, but with redirection to "k_folder_link". The "custom_field" is a great part - so only Admin now can see the pages marked with the "only_admin" checkbox. Now we need to say "No articles here!" when there are no articles in the folder. We can't use:
Code: Select all
<cms:if k_folder_totalpagecount != '0'>
   <cms:pages ... // Our articles here // </cms:pages>
<cms:else />
   No articles
</cms:if>

Because our marked "only_admin" articles are still counted, so if the folder contains only marked articles, we will not see "No articles", because k_folder_totalpagecount will not equal Zero. So, the way is:
Code: Select all
<cms:capture into='article' scope='global'>
   <cms:pages folder=k_folder_name custom_field="<cms:if k_user_access_level lt '7'>only_admin != 1</cms:if>">
      <article>
         <cms:if k_user_access_level ge '7'>
            <cms:form class="edit-publish-<cms:if only_admin >off<cms:else />on</cms:if>" masterpage=k_template_name mode='edit' page_id=k_page_id method='post' anchor='0' >
               <cms:if k_success >
                  <cms:db_persist_form />
                  <cms:redirect k_folder_link />
               </cms:if>
               <cms:input name="only_admin" type="bound" onchange="this.form.submit()" value="" />
            </cms:form>
         </cms:if>
         <h1><cms:show k_page_title /></h1>
         <p><cms:show content /></p>
      </article>
   </cms:pages>
</cms:capture>
<cms:if "<cms:not_empty article />" >
   <cms:show article />
<cms:else />
   No articles
</cms:if>

This trick works great and is very flexible - it works for the every situation both for Admin or Visitor.

The job is done, hope that will help somebody! Let's create websites with perfect usability with Couch!