Dynamically create html elements with jquery in a SharePoint Content Editor Web Part

One of the ways I like to create solutions with SharePoint is to utilize the Content Editor web part with some jquery to sort of commandeer the UI, because sometimes you just need to get some prototypes put together and the fastest way is to mock up and then create similar functionality.

In this example I have a document library that I have 9 pages in, I created the page names to coincide with the names of the dynamically generated buttons, divs, and iframes I am creating. My page names are
"Home", "Cost", "Schedule", "Performance", "Charts", "Reports", "Logistics", "Inventory"

Basically what I do is that I have2 empty divs on my page, and then as the page loads it creates all the buttons, divs, and iframes based off the list above that is used as an array.

What I really like about this solution is that I can reuse it over and over again since in order to get this script to work from a central location  I had to abstract out the order number to be used as a parameter which happens to be the site's title and is included in my url. Since all of our sub sites are created based off a template this works perfectly.

The script that my content editor points to looks like this

Now that we have that we can turn our attention to the javascript file that will loop through the array and create our buttons, divs, and iframes

// Define some initial variables
var buttonClicked = 'showHome';
var currentDiv = 'divHome';
var homeUrl="";
var siteName = "/dashboards/";
var siteLibrary = "/SitePages/";
var urlEnd = ".aspx?isdlg=1";
// This is an array of all the items names we want to use for our buttons
var pages = ["Home", "Cost", "Schedule", "Performance", "Charts", "Reports", "Logistics", "Inventory"];
// Since this script is centralized we need to look at the current Dashboard and get the task order number
var currentTaskOrderUrl = window.location.href;
var TaskOrderNumber = currentTaskOrderUrl.split('/')[4];
// onClick event for our dynamically created buttons
$(".switchIframe").live('click', function(e){
 // Lets make sure that nothing happens if the user clicks an already selected button
 if (e.target.id != buttonClicked)
 {
  
  // The user clicked a button for new content, we can target the div we want to show by 
  // doing a replace of the currently selected button's id, which has the same id name 
  // button id = showHome & div id = divHome
  targetDiv = (e.target.id).replace("show", "div");
  var $targetIframe = $($(this).data('target')), 
  src = $(this).data('src');
  
  if($targetIframe.attr('src') != src)
  {
   $targetIframe.attr('src', src);
  }

  hideDiv(currentDiv);
  showDiv(targetDiv);
  currentDiv = targetDiv;
  buttonClicked = e.target.id;
 }
    
});

function createLayout()
{
 var b;
 // Loop through the array of items we need to create
 for(b=0;b');
  // Source code to create all of our divs and iframes inside a div with an ID of contentdivs
  $("#contentdivs").append('

'+pages[b]+'


');
 }
}

function showDiv(id) {
   var $sDiv = $('#' + id);
   $sDiv.show(800);
}

function hideDiv(id) {
   var $hDiv = $('#' + id);
   $hDiv.hide(200);
}

$(document).ready(function(){
 // Build the UI elements, buttons, divs, iframes
    createLayout();
    // Load up the source attribute of the home iframe
    $('#iframeHome').attr('src', homeUrl);
    // Show the div
 $('#divHome').show(600);
        
 
}); 

Powershell add a document library to a set of sub sites recursively

So during one of my many experiments the other day I found I needed a document library on all of my orders sites that had a custom web part page in it. While there are several ways of doing this with Powershell I chose to loop through my sub sites and add the DashboardSitePages document library to each site from scratch. I also wanted to add a web part page to this library named Dashboard.aspx.

Hey for some reason my script pasting function is not rendering the xml line very well below so here is a link to the complete script file.

## DESCRIPTION
## ------------------------------------------------
## Script to loop through a set of Subsites and  
## adds a document library named SitePages  and a 
## web part page to the site named dashboard.aspx
 
## EXPLAINATION
## ------------------------------------------------
## This example illustrates how to loop through a  
## set of sub sites and add a document library and a 
## web part page named dashboard.aspx 

##
## BEGIN
## ------------------------------------------------
## Load up the snapin so Powershell can work with SharePoint
## if the snapin was already loaded don't alert the user
Add-PSSnapin microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue
## Clear any errors or output to the screen
CLS
## Set variables
## This variable will be the site where I want to start
$parentSite = "http://sp2010/dashboards"
$webSites = Get-SPWeb $parentSite

$layoutTemplate = 2
$documentLibraryDescription = "A Document Library to store the Dashboard Pages"
$pageTitle = "Dashboard"
$targetLibrary = "DashboardSitePages"

function CreateSitePagesDocLib
{
 $listTemplate = [Microsoft.SharePoint.SPListTemplateType]::DocumentLibrary
 $webSite.Lists.Add($targetLibrary, $documentLibraryDescription, $listTemplate)
 $docLib = $webSite.Lists[$targetLibrary]
 $docLib.OnQuickLaunch = $true
 $docLib.EnableVersioning = $true
 $docLib.Update()
 CreateDashboardPage
}

function CreateDashboardPage
{
 $list = $webSite.GetList("http://sp2010/dashboards/$webSiteName/SitePages/")
 $xml = "" + $list.ID + "NewWebPageNewWebPartPage" + $layoutTemplate + "true" + $pageTitle + ""
 
 $result = $webSite.ProcessBatchData($xml) 
}

foreach($webSite in $webSites.Webs)
{
 $webSiteName = $webSite.Name
 $webSiteDescription = $webSite.Description
 $sitePagesLib = $webSite.Lists[$targetLibrary]
 if($sitePagesLib)
 {
  CreateDashboardPage
 }
 else
 {
  CreateSitePagesDocLib
 }
}