Getting Current Management Server RedDot CMS Project Name via JavaScript

This is the easiest way to get current project name without complicated rendertag or preexecution. Just make sure you are already use the JQuery.js library.

<script type="text/javascript">
 var TheRealUIContainerPage;
 var ProjectLabelText;
 if(window.opener){
  if(window.opener.name == 'ioActionMenu'){
   // smarttree
   TheRealUIContainerPage = top.opener.parent.parent.parent.parent.document;
   ProjectLabelText = $(TheRealUIContainerPage).find('body #ctl00_ctl00__bodyPlaceHolder__infoMenu_2 .ca_tb_txt').text();
  }
 }else{
  // smartedit
  TheRealUIContainerPage = window.parent.document;
  ProjectLabelText = $(TheRealUIContainerPage).find('body #ctl00_ctl00_ctl00__bodyPlaceHolder__infoMenu_2 .ca_tb_txt').text();
 }

 alert(ProjectLabelText);
</script>

List versus Container Best Practices

There has been many confusions over when to use a list element or a container element. For Example, I want to have a slider module on my home page.

The flexslider has the following HTML code:

<div class="flexslider" id="myflexslider">
	<ul class="slides">
		<li>
			<img src="slide1.jpg" />
		</li>
		<li>
			<img src="slide2.jpg" />
		</li>
		<li>
			<img src="slide3.jpg" />
		</li>
		<li>
			<img src="slide4.jpg" />
		</li>
	</ul>
</div>
<script type="text/javascript" charset="utf-8">
    $('#myflexslider').flexslider();
</script>

The Bad Solution

Each slide is a page containing a slide image. Then a list placeholder is used to pull in images.

<!-- flexslider content class -->
<!IoRangeRedDotMode>
<div class="alert-reddot <!IoRangeNoEditMode>alert-error<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>alert-success<!/IoRangeRedDotEditOnly>">
    <div><!IoRedDotOpenPage> [<!IoRangeNoEditMode>Open to Edit<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>Close to Save<!/IoRangeRedDotEditOnly> Page]</div>
    <!IoRangeRedDotEditOnly>
    <div><!IoRedDot_lst_slides> [Manage Slides]</div>
    <!/IoRangeRedDotEditOnly>
</div>
<!/IoRangeRedDotMode>
<div class="flexslider" id="myflexslider">
    <ul class="slides">
        <!IoRangeList>
        <li>
            <!-- <%lst_slides%> -->
            <!IoRedDot_img_slide><%img_slide%>
        </li>
        <!/IoRangeList>
    </ul>
</div>
<script type="text/javascript" charset="utf-8">
    $('#myflexslider').flexslider();
</script>

This is a sub-optimal method because

1. The slider pages will get published out as these useless HTML snippet pages, occupying space and unnecessarily indexed. Of course, one can prevent it by setting the template of the content class not to publish or use a content class without template. Nevertheless, it causes more work.
2. After editing a slider page in SmartEdit, user can't submit or release the slider page because it is hidden behind a list. Of course, one can make the slider page hidden behind the list accessible in SmartEdit. Nevertheless, it causes more work.

The Current Best Practice Solution

Each slide is a page containing a slide image. Then a container placeholder is used to contain the pages.

<!-- flexslider content class -->
<!IoRangeRedDotMode>
<div class="alert-reddot <!IoRangeNoEditMode>alert-error<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>alert-success<!/IoRangeRedDotEditOnly>">
    <div><!IoRedDotOpenPage> [<!IoRangeNoEditMode>Open to Edit<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>Close to Save<!/IoRangeRedDotEditOnly> Page]</div>
    <!IoRangeRedDotEditOnly>
    <div><!IoRedDot_con_slides> [Manage Slides]</div>
    <!/IoRangeRedDotEditOnly>
</div>
<!/IoRangeRedDotMode>
<div class="flexslider" id="myflexslider">
    <ul class="slides">
        <%con_slides%>
    </ul>
</div>
<script type="text/javascript" charset="utf-8">
    $('#myflexslider').flexslider();
</script>

<!-- flexslider slide content class -->
<li>
    <!IoRedDotOpenPage><!IoRedDot_img_slide><%img_slide%>
</li>

Breadcrumb: Rendertag Vs Placeholder

Generally, there are two ways to generate a breadcrumb

Method #1: Rendertag

<%!! Navigation:OutputArea(Breadcrumb) !!%>

Method #2: Placeholder

<!IoRangeBreadCrumb><%anc_breadcrumb%> &raquo; <!/IoRangeBreadCrumb> <%hdl_title%>

Instead of using rendertag, it is best practice to use native placeholder to generate the breadcrumb for the following reasons:

1. When using rendertag to generate breadcrumb, the page must be in navigation structure.  For performance reasons, it is unwise to have a page in navigation structure for the sole purpose having a breadcrumb because this will not scale for sites with 200+ pages.  Large navigation structure = slow project.
2. Hiding a page from breadcumb requires additional rendertag logic, which is another performance cost.  Whereas using breacrumb placeholder, simply select page, click "edit properties", and enable "Do not use for breadcrumb"

What a project start page should look like

1. Start page should never be a navigation page
2. Anchor should be used instead of list because anchor allows individual publication package, authorization, and workflow for each section.
3. CSS and JS should never be connected directly to a page.  They should only be connected to one location and referenced by other pages.