Web Developer Experience - Boo!

01 - !welcome.md

Welcome! :)

Stay tuned!

01 - custom tasks.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- This XSL Stylesheet created by SharePoint Experts, Inc.    -->
    <!-- http://sharepointexperience.com                            -->

    <xsl:output method="html" indent="yes"/>
    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- This is the actual wrapper element that will be emitted -->
        <div>
            <h1>W00T!</h1>
        <style>
            .tasklist {
            border: 1px dotted silver;
            padding: 1em;
            font-family: sans-serif;
            }

            .tasklist > dt {
            font-weight: bold;
            font-size: 1.25em;
            }

            .tasklist .pri-high + dd .graph {
            background: red;
            }

            .tasklist .pri-normal + dd .graph {
            background: gray;
            }

            .tasklist .pri-low + dd .graph {
            background: green;
            }

            .tasklist .graphbox {
            border: 1px solid silver;
            width: 300px;
            }
            .tasklist .graph {
            height: 1em;
            position: relative;
            }

            .tasklist .graph span {
            position: absolute;
            right: -3em;
            }
        </style>

        <dl class="tasklist">
            <xsl:apply-templates/>
        </dl>
    </div>
        <!-- end wrapper -->
    </xsl:template>
    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!-- This markup is used for each item in the list -->
        <dt class="pri-{translate(@Priority, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ(123) ', 'abcdefghijklmnopqrstuvwxyz')}"><xsl:value-of select="@Title"/></dt>
        <dd>
            <div><xsl:value-of select="@Status"/></div>
            <div class="graphbox">
                <div class="graph" style="width: {@PercentComplete.*300}px;">
                    <span>
                        <xsl:value-of select="@PercentComplete"/>
                    </span>
                </div>
            </div>
        </dd>
    </xsl:template>
</xsl:stylesheet>

03 - Accordion Announcements.xsl

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt ddwrt2 __designer asp SharePoint d x" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">

<!-- This XSL Stylesheet created by SharePoint Experts, Inc.    -->
<!-- http://sharepointexperience.com                            -->

    <xsl:output method="html" indent="yes"/>
    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- This is the actual wrapper element that will be emitted -->
        <div class="accordion">
            <!-- This will tell the data view to look for the actual content
                 and come back when it's done. -->
            <xsl:apply-templates />
        </div>
        <script type="text/javascript">
			$('.accordion').accordion();
        </script>
        <!-- end wrapper -->
    </xsl:template>
    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!-- This markup is used for each item in the list -->
        <h3><xsl:value-of select="@Title"/></h3>
        <xsl:value-of select="@Body" disable-output-escaping="yes"/>
    </xsl:template>
</xsl:stylesheet>

03 - Bar Graph.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    <xsl:param name="chartWidth">500</xsl:param>
    <xsl:param name="chartHeight">350</xsl:param>
    <xsl:param name="barMax">300</xsl:param>
    <xsl:param name="barWidth">25</xsl:param>
    <xsl:param name="barPadding">10</xsl:param>

    <xsl:template match="/">

        <svg 
            width="{$chartWidth}" 
            height="{$chartHeight}" 
            xmlns="http://www.w3.org/2000/svg">
            <g>
                <title>Tasks (percent complete)</title>
                <xsl:apply-templates 
                    select="/dsQueryResponse/Rows/Row"/>
            </g>
            <style>
                rect.pri-high {
                    fill: red;
                }
                rect.pri-normal {
                    fill: yellow;
                }
                rect.pri-low {
                    fill: green;
                }
            </style>
        </svg>

    </xsl:template>

    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!--
            barheight = barMax * PercentComplete.
            barLeft = (currentRowNum * (barWidth + barPadding)
            barTop = chartHeight - barHeight
        -->
        <xsl:variable 
            name="barLeft" 
            select="position() * ($barWidth + $barPadding)"/>
        <xsl:variable
            name="barHeight"
            select="$barMax * @PercentComplete."/>
        <xsl:variable 
            name="barTop"
            select="$chartHeight - $barHeight"/>
        <rect
            class="pri-{translate(@Priority, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ(123) ', 'abcdefghijklmnopqrstuvwxyz')}"
            x="{$barLeft}"
            y="{$barTop}"
            width="{$barWidth}"
            height="{$barHeight}"
            fill="#000000"/>
        <text class="barLabel" text-anchor="middle" 
            y="{$chartHeight - ($barHeight div 2)}" 
            x="{($barWidth div 2) + $barLeft}" fill="#ffff00"
            transform="rotate(-90, {($barWidth div 2) + $barLeft}, {$chartHeight - ($barHeight div 2)})"
            >
            <xsl:value-of select="@Title"/>
        </text>
        <text text-anchor="middle" y="{$barTop - 16}" x="{($barWidth div 2) + $barLeft}" fill="#000000">
            <xsl:value-of select="@PercentComplete"/>
        </text>
    </xsl:template>

</xsl:stylesheet>

03 - Baseline DVWP.xsl

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt ddwrt2 __designer asp SharePoint d x" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">

<!-- This XSL Stylesheet created by SharePoint Experts, Inc.    -->
<!-- http://sharepointexperience.com                            -->

    <xsl:output method="html" indent="yes"/>
    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- This is the actual wrapper element that will be emitted -->
        <div class="whatever">
            <!-- This will tell the data view to look for the actual content
                 and come back when it's done. -->
            <xsl:apply-templates/>
        </div>
        <!-- end wrapper -->
    </xsl:template>
    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!-- This markup is used for each item in the list -->
        <p><xsl:value-of select="@Title"/></p>
    </xsl:template>
</xsl:stylesheet>

03 - calendar-awesomesauce.xsl

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" indent="yes"/>

    <xsl:template match="/">
        <style>
            .category-meeting{
                background:green;
            }
            
            .category-business{
                background:red;
            }
            
            .author-dustin{
                font-weight:bold;
            }</style>
        <script type="text/javascript">
            function spe_AddFileToHead(fileName, fileType) {
                if (fileType=="js") {
                    var domElement = document.createElement("script");
                    domElement.setAttribute("type","text/javascript");
                    domElement.setAttribute("src", fileName);
                } else if (fileType=="css") {
                    var domElement = document.createElement("link")
                    domElement.setAttribute("rel", "stylesheet");
                    domElement.setAttribute("type", "text/css");
                    domElement.setAttribute("href", fileName);
                }
                if (typeof domElement != "undefined") {
                    document.getElementsByTagName("head")[0].appendChild(domElement);
                }
            }
            spe_AddFileToHead('http://classcdn.s3-website-us-east-1.amazonaws.com/styles/fullcalendar.css','css');
        </script>
        <script src="http://classcdn.s3.amazonaws.com/js/fullcalendar.js"/>
        <div id="calendar"/>
        <script type="text/javascript">
            $('#calendar').fullCalendar(
                {
                    theme: true,
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    }, 
                    events: [<xsl:apply-templates select="/dsQueryResponse/Rows/Row"/>]
                }
            );
        </script>
    </xsl:template>

    <xsl:template match="Row"> { title : '<xsl:value-of select="@Title"/>', start : '<xsl:value-of
            select="@EventDate"/>', end : '<xsl:value-of select="@EndDate"/>', className:
            ['author-<xsl:value-of
            select="translate(substring-after(@Author.title,'\'),'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567890 -_=+','abcdefghijklmnopqrstuvwxyz')"
        />', 'category-<xsl:value-of
            select="translate(@Category,'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567890 -_=+','abcdefghijklmnopqrstuvwxyz')"
        />' ] <xsl:if
            test="not(boolean(@fAllDayEvent.value))"> , allDay : false </xsl:if> } <xsl:if
            test="position()!=last()">,</xsl:if>
    </xsl:template>

    <xsl:template name="cssclasses">
        <xsl:param name="theevent"/> { <xsl:call-template name="sanitizeforcss">
            <xsl:with-param name="prefix">author-</xsl:with-param>
            <xsl:with-param name="stringtofix" select="@Author.title"/>
        </xsl:call-template>, <xsl:call-template name="sanitizeforcss">
            <xsl:with-param name="prefix">category-</xsl:with-param>
            <xsl:with-param name="stringtofix" select="@Category"/>
        </xsl:call-template> } </xsl:template>

    <xsl:template name="sanitizeforcss">
        <xsl:param name="stringtofix"/>
        <xsl:param name="prefix"/>

    </xsl:template>

</xsl:stylesheet>

03 - Identity Transform.xsl

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt ddwrt2 __designer asp SharePoint d x" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">

<!-- This XSL Stylesheet created by SharePoint Experts, Inc.    -->
<!-- http://sharepointexperience.com                            -->

    <xsl:output method="xml" indent="yes"/>
    <xsl:param name="Language"></xsl:param>
    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- This is the actual wrapper element that will be emitted -->
        <dl>
            <dt>Language</dt>
            <dd><xsl:value-of select="$Language"/></dd>
        </dl>
        <xmp>
            <!-- This will tell the data view to look for the actual content
                 and come back when it's done. -->
            <xsl:apply-templates/>
        </xmp>
        <!-- end wrapper -->
    </xsl:template>
    <xsl:template match="@*|*">
        <!-- This markup is used for each item in the list -->
        <xsl:copy>
            <xsl:apply-templates select="@*|*"/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

03 - tasks-with-highcharts.xsl

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" indent="yes"/>
    <xsl:param name="titleYAxis">Y-Axis</xsl:param>
    <xsl:param name="chartType">column</xsl:param>
    <xsl:param name="chartTitle">The Chart</xsl:param>
    <xsl:param name="chartSubtitle">The Subtitle</xsl:param>
    <xsl:param name="chartSeriesName">The Series</xsl:param>
    <xsl:param name="seriesField">PercentComplete.</xsl:param>
    <xsl:param name="seriesPercent" select="true()"/>
    <xsl:param name="categoryField">Title</xsl:param>
    <xsl:template match="/">
        <script src="http://code.highcharts.com/highcharts.js"/>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"/>

        <script type="text/javascript">
            $(function () {
                $('#container').highcharts({
                    chart: {
                        type: '<xsl:value-of select="$chartType"/>'
                    },
                    title: {
                        text: '<xsl:value-of select="$chartTitle"/>'
                    },
                    subtitle: {
                        text: '<xsl:value-of select="$chartSubtitle"/>'
                    },
                    <xsl:call-template name="outputXAxis"/>
                    ,
        yAxis: {
            title: {
                text: '<xsl:value-of select="$titleYAxis"/>'
            }
        },
        <xsl:call-template name="plotOptions"/>
        ,
        series:[ {
            name: '<xsl:value-of select="$chartSeriesName"/>',
            data:[
                  <xsl:apply-templates select="/dsQueryResponse/Rows/Row" mode="series"/>
                  
                  
            ]
        }]
    });
});
        </script>



    </xsl:template>



    <xsl:template name="outputXAxis"> xAxis: { categories:[<xsl:apply-templates
            select="/dsQueryResponse/Rows/Row" mode="categories"/>] } </xsl:template>

    <xsl:template name="plotOptions">
        <xsl:choose>
            <xsl:when test="$chartType='column'"> plotOptions: { column: { pointPadding: 0.2,
                borderWidth: 0 } } </xsl:when>
        </xsl:choose>
    </xsl:template>

    <xsl:template match="Row" mode="categories">
        <xsl:apply-templates select="./@*" mode="findattr">
            <xsl:with-param name="attr" select="$categoryField"/>
            <xsl:with-param name="wrap">&apos;</xsl:with-param>
        </xsl:apply-templates>
        <xsl:if test="position()!=last()">,</xsl:if>
    </xsl:template>

    <xsl:template match="Row" mode="series">
        <xsl:apply-templates select="./@*" mode="findattr">
            <xsl:with-param name="attr" select="$seriesField"/>
        </xsl:apply-templates>
        <xsl:if test="position()!=last()">,</xsl:if>
    </xsl:template>

    <xsl:template match="@*" mode="findattr">
        <xsl:param name="attr"/>
        <xsl:param name="wrap"/>
        <xsl:if test="name(.)=$attr">
            <xsl:value-of select="concat($wrap,.,$wrap)"/>
        </xsl:if>
    </xsl:template>

</xsl:stylesheet>

Reference - Objects.mdown

Objects

Properties

Color, bodyType, numDoors, MPGInstant, MPGAverage, engineDisplacement, engineCylinders, isExploding, make, model, pricePurchace, priceResale, isParked, location, carbonFootprint, transmissionType, fuelLevel, mileage, velocity, engineType, radioStation, oilLevel, owner

Methods

changeGear(gear) returns boolean, changeVelocity(deltaSpeed, deltaDirection), setWipers(speed), openDoor(door), engageGoogleAutonomousPilot(trust), changeLights(light), ejectPassenger, changeIgnition(ignitionState), crash, toggleSeatbelt, adjustClimateSystem, sell(newOwner), refuel(volume)

Events

oilLeak, engineStart, crash, oilPressureAlert, brakeLoss, transmissionChange, park, fuelWarning, TPMS, exploding, ownerChange, laneDepartureWarn, doorAjar