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).
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.
And add a Publish button using DataBound:
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:
Now some complexity about folder-view.
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:
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:
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!
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!