This documentation relates to an earlier version of the SharePoint Connector.
View

Unknown macro: {spacejump}

or visit the current documentation home.

Info on how to incorporate the SharePoint Connector for Confluence Theme elements into other themes.

Useful if...

This could be useful if you already have an existing custom theme, and you want to take advantage of the Sharepoint Connector's features.

Table of Contents

Changes to atlassian-plugin.xml

If your theme doesn't already have it, you will need to add an entry to your atlassian-plugin.xml to override the main decorator. Like so:

        <!-- If you already have a theme tag, just add the layout tag within it -->
	<theme key="atheme" name="Themey Goodness"
	 class="com.atlassian.confluence.themes.BasicTheme" >
   		<layout key="com.atlassian.confluence.extra.csi246:main2.8"/>
	</theme>
        <layout key="main2.8" name="Main Decorator" class="com.atlassian.confluence.themes.VelocityDecorator"
            overrides="/decorators/main.vmd">
            <resource type="velocity" name="decorator"                  
                  location="templates/extra/sharepoint/main.vmd"/>
        </layout>

And put a copy of some (yours, the default Confluence's, etc.) main.vmd in the location you describe. In the example above, we put it in the dir templates/extra/sharepoint/

Using the default theme?

If you're using the default theme, you'll want to explicitly invoke that by adding the following parameters to your theme tag:

        <!-- CSS -->
        <resource type="download" name="default-theme.css" location="/includes/css/default-theme.css">
           <param name="source" value="webContext"/>
        </resource>
        <param name="includeClassicStyles" value="false"/>

See Also: Creating a Stylesheet Theme​

Jar Structure

The file structure of the plugin jar after the plugin's been built looks like:

Ed:~/Code/Workspace/CSI-246-ThemeTester laura$ jar tvf dist/plugins-csi-246-themetester-1.0.jar 
     0 Thu Sep 04 16:02:58 EDT 2008 META-INF/
   107 Thu Sep 04 16:02:56 EDT 2008 META-INF/MANIFEST.MF
     0 Thu Sep 04 15:08:08 EDT 2008 templates/
     0 Thu Sep 04 15:08:16 EDT 2008 templates/extra/
     0 Thu Sep 04 15:08:58 EDT 2008 templates/extra/sharepoint/
  1061 Thu Sep 04 15:34:08 EDT 2008 atlassian-plugin.xml
  6868 Thu Sep 04 16:01:50 EDT 2008 templates/extra/sharepoint/main.vmd

Sharepoint Searchbox

The Sharepoint Connector provides a way to Search across both your Sharepoint and your Confluence at the same time. The Sharepoint Searchbox looks like the following.

Confluence 2.8 inspired theme

Now, we need to update that main.vmd described CONFEXT:above to have the javascript and UI elements necessary for the search bar.
For a Confluence 2.8+ inspired theme, you would add the following elements to the main.vmd.

Each code chunk will have a written description of what it is, where it's going, a "before" code sample with pre-existing code, and an "after" code sample with the code change necessary.

Search Javascript

This code chunk provides javascript necessary for the searchbox to work.
It will be placed right before the end of the head tag

Before Code Sample

    #standardHeader()
    $!settingsManager.globalSettings.customHtmlSettings.beforeHeadEnd
</head>
## HTML HEADER ENDS

After Code Sample

    $!settingsManager.globalSettings.customHtmlSettings.beforeHeadEnd
    
    ## --START CSI (Confluence SharePoint Integration) mod: Searchbar Javascript
    <script language="javascript">
        
        var selectSearchOption = getCookie("confluenceSearchOption");
        #set ($spSearchAllowed = $helper.renderConfluenceMacro("{sp-config:sp-search-toggle}"));
        var spSearchAllowed = $spSearchAllowed;
        
        function changeSearchLoc(searchSel) {
            var sharePointSearchURL = "$helper.renderConfluenceMacro("{sp-config:sp-search-url}")";
            selectSearchOption = searchSel.selectedIndex;
            if (searchSel.selectedIndex == 0) {
                document.cookie="confluenceSearchOption="+searchSel.selectedIndex+";path=/;"; //path must be / otherwise it saves a different cookie for different spaces and globally
                document.getElementById("quick-search").action = sharePointSearchURL;
            } else
            {
                document.cookie="confluenceSearchOption="+searchSel.selectedIndex+";path=/;";
                document.getElementById("quick-search").action = "$req.contextPath/dosearchsite.action";
            }
        }
        
        //assigns all necessary form values, to prepare for search 
        function sharepointSearchAssignValues() {
           //set the hidden confluence value to the textfield value - important if using confluence form
           document.searchForm.confSearchInput.value=document.searchForm.spsearchfield.value;
        }
        
    </script>
    ## --END CSI mod

</head>
## HTML HEADER ENDS

Searchbox Form

This code chunk replaces the existing Confluence quick searchbar with the Sharepoint searchbar.
It is placed just in the beginning of the content div, and the code for the pre-existing quick searchbar is commented out.

Before Code Sample

## CONTENT DIV BEGINS
<div id="header">
    #quickSearch()
    <ul id="header-menu-bar" class="ajs-menu-bar">

After Code Sample

## CONTENT DIV BEGINS
<div id="header">
## --START CSI (Confluence Sharepoint Integration) mod: comment out old search bar
##    #quickSearch()
## --END CSI
## --START CSI (Confluence SharePoint Integration) mod: add new searchbar with Sharepoint features
## search form now allows for drop down search choices, javascript persists the selection AND populates the selection when the page is rendered
##            <td align="right" valign="middle" style="white-space:nowrap">
            	 <!-- Sharepoint Search (CSI-6)-->
<form id="quick-search" style="margin: 1px; padding: 1px;"
                      name="searchForm" action="$helper.renderConfluenceMacro("{sp-config:sp-search-url}")"
                      method="GET" onsubmit="sharepointSearchAssignValues();">
<fieldset>
<legend>Quick Search</legend>
                 	<input id="spsearchfield" type="text" size="25" name="$helper.renderConfluenceMacro("{sp-config:sp-search-field-name}")" accesskey="s"/ >
                 	<SELECT id="searchOptionsDropDown" NAME="searchChoice" onchange="changeSearchLoc(this);">
                       #if ($spSearchAllowed == "true")
                     	<option id="" value="SPandC">
                     	   SharePoint & Confluence
                     	</option>
                       #end
                     	<option value="$req.contextPath/dosearchsite.action" >
                     	   Confluence Only
                     	</option>
                 	</SELECT>
                 	<!-- confluence search vars -->
                 	<input type="hidden" value="conf_global" name="searchQuery.spaceKey"/>
                 	<input type="hidden" value="true" name="quickSearch"/>
                 	<input id="confSearchInput" type="hidden" value="" name="searchQuery.queryString" />
                 	<!-- end confluence search vars -->                 	
                 	<!--<input type="submit" value="Search" onmouseover="setSelectedSearchOption();"/>-->
                 	<input type="submit" value="Search"/>
<span id="quick-search-query" class="placeholded" type="text" size="1" name="searchQuery.queryString" accesskey="q"/>
</fieldset>
<fieldset class="hidden parameters">
</fieldset>
</form>
## --END CSI mod
###########

    <ul id="header-menu-bar" class="ajs-menu-bar">

Dropdown Choice Cookie Code

This code chunk saves the dropdown menu choice (Sharepoint or Confluence vs. Confluence Only) to a cookie, so that the dropdown menu stays consistent throughout the Confluence site.
It is placed at the end after the CONTENT DIV ENDS comment and before the footer.

Before Code Sample

## CONTENT DIV ENDS

#parse ("/decorators/includes/footer.vm")

After Code Sample

## CONTENT DIV ENDS
## --START CSI (Confluence SharePoint Integration) mod: Dropdown Cookie Saving
<script language="javascript">
    function setSelectedSearchOption() {
        if (!spSearchAllowed) { //set to Confluence
           setCookie("confluenceSearchOption", "0"); 
           document.getElementById("quick-search").action = "$req.contextPath/dosearchsite.action";
           searchOptionDropDown.selectedIndex = 0; // (only one selection right now, so use 0)
        }
        else { //use cookie to determine setting
           var selectedSearchValue = getCookie("confluenceSearchOption");
           if (selectedSearchValue==null) selectedSearchValue = 0;
           var searchOptionDropDown = document.searchForm.searchChoice;
           searchOptionDropDown.selectedIndex = selectedSearchValue;
           if (selectedSearchValue==1) {
              document.getElementById("quick-search").action = "$req.contextPath/dosearchsite.action";
           }
        }
    }
    setSelectedSearchOption();
</script>
## --END CSI (Confluence SharePoint Integration) mod

#parse ("/decorators/includes/footer.vm")

Sharepoint Link in Breadcrumbs

The Sharepoint Theme provides a link to the Sharepoint Server in the breadcrumbs, just before the Dashboard link.

You'll need to have the same changes in the atlassian-plugin.xml as listed for the searchbar code. See How to incorporate the SharePoint theme into another custom theme. You'll also be adding code to main.vmd. For a Confluence 2.8+ inspired theme, you would add the following.

Sharepoint Breadcrumb

This code chunk adds a link to the Sharepoint Server in your breadcrumbs just before the Dashboard link.
It is placed at the end of the header div and before the main div.

Before Code Sample

    <ul id="header-menu-bar" class="ajs-menu-bar">
        $!sitemeshPage.getProperty("page.browse-menu")
        #menuMacros_renderUserMenu()
    </ul>
    $!sitemeshPage.getProperty("page.breadcrumbs")
</div>
<div id="main">

After Code Sample

    <ul id="header-menu-bar" class="ajs-menu-bar">
        $!sitemeshPage.getProperty("page.browse-menu")
        #menuMacros_renderUserMenu()
    </ul>
###########
## --START CSI (Confluence SharePoint Integration) mod: Sharepoint Link in Breadcrumbs
<ol id="breadcrumbs"><li>$helper.renderConfluenceMacro("{sp-config:sp-serverLink}")</li><li><span>#breadcrumbs()</span></li></ol>
##    $!sitemeshPage.getProperty("page.breadcrumbs") ## commenting normal breadcrumbs
## --END CSI mod
###########
</div>
<div id="main">

sp-list Document Editing

The sp-list macro might display links to docs of MSOffice type (doc, xls, etc.). When you click such a link, it will open the document in your default Office-like program. If that program is MS Office, and you have the Sharepoint theme installed, then when you save changes to that document it will be automatically reloaded to that Sharepoint. In order to do this, you'll need to include the following headers.

Headers

This code chunk provides javascript headers to allow Sharepoint, MS Office, and Confluence to interact peacefully, and is placed after the other javascript resources are invoked and before either the end of the head tag, or before the search javascript listed above. The example will show the latter.
Before Code Sample

    #requireResource("confluence.web.resources:master-styles")
    #requireResource("confluence.web.resources:print-styles")

    #standardHeader()
    $!settingsManager.globalSettings.customHtmlSettings.beforeHeadEnd

    <script language="javascript">
        
        var selectSearchOption = getCookie("confluenceSearchOption");
        #set ($spSearchAllowed = $helper.renderConfluenceMacro("{sp-config:sp-search-toggle}"));

After Code Sample

   #standardHeader()
    $!settingsManager.globalSettings.customHtmlSettings.beforeHeadEnd
    
    ## --START CSI (Confluence SharePoint Integration) mod
    <script type="text/javascript" language="javascript" src="$helper.renderConfluenceMacro("{sp-config:serverURL}")/_layouts/1033/init.js"></script>
    <script type="text/javascript" language="javascript" src="$helper.renderConfluenceMacro("{sp-config:serverURL}")/_layouts/1033/core.js" defer></script>
    <script language="javascript">
        
        var selectSearchOption = getCookie("confluenceSearchOption");
        #set ($spSearchAllowed = $helper.renderConfluenceMacro("{sp-config:sp-search-toggle}"));

IE6 Rendering issues in Confluence 2.9 theme

We ran into a couple of rendering issues in the Confluence 2.9 default theme as regards IE6. See CSI-302 for a list of issues.

We added a couple of CSS changes to main.vmd to counter these issues. If you would like to add these fixes to your theme, the following code is added to the end of the header. It does not affect non-IE browsers, and requires version 1.0.3c of the Sharepoint Plugin in order to take advantage of the check for Confluence 2.9.

Before Code Sample

</head>
## HTML HEADER ENDS

After Code Sample

   ## Fixes IE Rendering errors in Confluence 2.9
   #if ($helper.renderConfluenceMacro("{sp-config:isConf29}") == "true")
<!--[if IE]>
   <style type="text/css"> 
     #navigation .ajs-menu-bar li.ajs-menu-item, #navigation .ajs-menu-bar li.ajs-button { margin-top:0px} ## Fixes Menu getting cut off in IE6,
     .create-page { position:absolute; width:80%} ## Fixes positioning of editor in add page
     #sidebar {width:20%}								  ## ...
     #content.space-administration table {position:absolute; width:80%;}       ## Fixes positioning of space-admin pages
	  #content.space-administration table table {position:relative; width:100%} ## ...
     body {background-color:white} ## whites out background
     .ajs-menu-item {z-index:2}    ## fixes user/browse menus so they overlap space tabs
   </style>
<![endif]--> 
   #end
   ## --END CSI mod
</head>
## HTML HEADER ENDS
  • No labels





Except where otherwise noted, content in this space is licensed under a Creative Commons Attribution 2.5 Australia License.