Creating New Theme in Oracle Sites Cloud Service – Part 4

In Part 1, Part 2 and Part 3 of this blog post you learned how to convert a Bootstrap theme into static SCS theme, use page layouts to add new pages and then how to create navigation menu that dynamically includes links to pages that you added to your site in the Site Builder. In the last part of this blog post you will learn how to add breadcrumbs and then add SCS slots to page layouts in your new theme to make site pages editable in the Site Builder. This will complete the steps required to convert a Bootstrap theme into SCS theme that you can then use for creating new sites and templates in Oracle Sites Cloud Service.

Step 8: Add Breadcrumbs to Page Layouts

In addition to the navigation in the top bar, pages in the Modern Business theme display Breadcrumbs navigation at the top of page content area. In this step you will use Oracle SCS Render API to replace static Breadcrumbs with dynamically generated path.

1.   In a page layout, find HTML that renders Breadcrumbs navigation:

<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
   ...</div>
</div>

2.   Replace it with HTML snippet below (note id=”breadcrumb” that you will use to add dynamically generated to this

):

<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div id="breadcrumb" class="col-lg-12">
           <!-- page breadcrumbs goes in here --></div>
</div>

3.   Open navigation.js file in your favorite editor and add the following code:

// render breadcrumbs...
 function renderBreadcrumbs() {
   var breadcrumb = $('#breadcrumb');
   // generate title using page name and page title...
   var id = SCS.navigationCurr,
     header = document.createElement('h1');
   $(header).addClass("page-header");
   $(header).text(SCS.structureMap[id].name + " ");
   var subheading = document.createElement('small');
   $(subheading).text(SCS.pageModel.properties.title);
   $(header).append(subheading);
   $(breadcrumb).append(header);
   // generate [age breadcrumb...
   var path = document.createElement('ol');
   $(path).addClass("breadcrumb");
   if ( id == SCS.navigationRoot ) {
     // Home page...
     var bcItem = document.createElement('li');
     $(bcItem).addClass("active");
     $(bcItem).text(SCS.structureMap[id].name);
     $(path).append(bcItem);
   } else {
     // one of sub-pages...
     var ids = getParnetIds(id), bcItem, bcLink, linkData;
     for (var i = ids.length - 1; i >= 0; i--) {
       bcItem = document.createElement('li');
       if ( ids[i] == id ) {
         $(bcItem).addClass("active");
         $(bcItem).text(SCS.structureMap[ids[i]].name);
       } else {
         bcLink = document.createElement('a');
         linkData = SCSRenderAPI.getPageLinkData(ids[i]) || {};
         if ( linkData.href ) {
           $(bcLink).attr("href", linkData.href);
         }
         $(bcLink).text(SCS.structureMap[ids[i]].name);
         $(bcItem).append(bcLink);
       }
       $(path).append(bcItem);
     }
   }
   $(breadcrumb).append(path);
 }
 // returns array of parent page id's...
 function getParnetIds (nodeId) {
   var ids =[], i = 0;
   ids[i] = nodeId;
   while ( nodeId != SCS.navigationRoot ) {
     nodeId = SCS.structureMap[nodeId].parentId;
     i = i + 1;
     ids[ i ] = nodeId;
   }
   return ids;
 }

4.   Extend code at the bottom pf the navigation.js file to add event listener to call on renderBreadcrunbs() function:

// must wait for the script to be ready...
 if (document.addEventListener) {
   document.addEventListener('scsrenderstart', renderNavbar, false);
   document.addEventListener('scsrenderstart', renderBreadcrumbs, false);
 } else if (document.attachEvent) {
   document.documentElement.scsrenderstart = 0;
   document.documentElement.attachEvent('onpropertychange', function(event) {
     if (event && (event.propertyName == "scsrenderstart")) {
       renderNavbar();
       renderBreadcrumbs();
     }
   }
   );
 }

Checkpoint 5

In the Site Builder, check that now you can use Breadcrumbs displayed on the site pages (apart from Home) that you can use to navigate to parent page.

Step 9: Add SCS Slots to the Page Layouts

On this step you will convert content areas in the page layouts to use SCS slots instead of original HTML code. SCS slots are

elements in the layout that have the value “scs-slot” in the class attribute. A slot is where you can add components to fill in the page content. Multiple

elements can be designated as slots by assigning the “scs-slot” class attribute. Each slot must have a unique id attribute. Slots that additionally have a class attribute value of “scs-responsive” will refresh their content as the browser viewport changes resolution.
There are different options available to add SCS slots to a Bootstrap HTML page:
  • you can convert into a single slot the
    element that contains the whole page content
  • you can convert into a slot each
    element that contains a row of content in a Bootstrap grid on the page
  • or you can convert into a slot each
    element that contains a column of content in a Bootstrap grid on the page

You should use options (a) or (b) above if you want to allow end users adding more than one SCS component into the slot. If that is the case you should use the “scs-slot” class attribute in combination with the ”scs-responsive” attribute. Option (c) allows you to create SCS page layout that matches closely structure of the original page in the Bootstrap theme. For example, you can create a grid of SCS slots similar to one below:

<div class="container">
<div class="row">
<div id=”grid-title" class="scs-slot col-lg-12"></div>
<div id="grid-col1" class="scs-slot col-md-4"></div>
<div id="grid-col2" class="scs-slot col-md-4"></div>
<div id="grid-col3" class="scs-slot col-md-4"></div>
</div>
</div>

This arrangement would typically be one where you intend to put only one SCS component per slot and use Bootstrap responsiveness. If that is the case, you do not need to use the “scs-responsive” class attribute. You can further restrict each slot by defining what seeded or custom components can be added to it, see Restricting Components in Slots for further details.

The steps below show an example of how you can add SCS slots to the Home page layout in the Modern Business theme (index.html file). You can use a different layout of slots based on your requirements.

1.   Open index.html file in your favorite editor and modify DIV elements that define columns in the Bootstrap grid layout for this page to include id attributes and ‘scs-slot’ class. Once finished, the content area should look something like that:

<!-- Page Content -->
<div class="container">
  <!-- Marketing Icons Section -->
<div class="row">
<div id="mrkt-title" class="scs-slot col-lg-12"></div>
<div id="mrkt-col1" class="scs-slot col-md-4"></div>
<div id="mrkt-col2" class="scs-slot col-md-4"></div>
<div id="mrkt-col3" class="scs-slot col-md-4"></div>
</div>
<!-- Portfolio Section -->
<div class="row">
<div id="prtf-title" class="scs-slot col-lg-12"></div>
<div id="prtf-col1" class="scs-slot col-md-4 col-sm-6"></div>
<div id="prtf-col2" class="scs-slot col-md-4 col-sm-6"></div>
<div id="prtf-col3" class="scs-slot col-md-4 col-sm-6"></div>
</div>
<!-- Features Section -->
<div class="row">
<div id="frts-title" class="scs-slot col-lg-12"></div>
<div id="frts-col1" class="scs-slot col-md-6"></div>
<div id="frts-col2" class="scs-slot col-md-6"></div>
</div>

<hr>

<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div id="well-col1" class="scs-slot col-md-8"></div>
<div id="well-col2" class="scs-slot col-md-4"></div>
</div>
</div>

<hr>

<!-- Footer -->  
<footer>
<div class="row">
<div class="col-lg-12">Copyright © Modern Business 2016</div>
</div>
</footer></div>

2.   Open Home page of the site in the Site Builder and switch to the Edit mode. You should see all the slots that you added highlighted. If you hover over a slot, you can see slot id displayed in the slot bar.

3.   Edit other page layout files to add SCS slots. Once done, use Edit mode in the Site Builder to validate that you can see all the slots that you added to page layouts.

Checkpoint 6

SCS theme Modern Business is complete. You can use page layouts to add new pages to your site and then drag and drop components to the slots that you defined. Once new site is complete, you can convert it into a new template and then share it with your colleagues.

Note: Pages in a Bootstrap theme often use a similar page structure. You should review what page layouts you really need to create / keep in your SCS theme to allow creating the site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s