Using XSLT with Bootstrap in a SharePoint App

• by Parlae Solutions Developer
• August 2015

 

If you want to create a customizable yet responsive form within SharePoint, you may want to think about using XSLT and Bootstrap. (The Bootstrap site contains directions on how to download and use bootstrap.)

SharePoint Apps with customizable forms enable users to add or remove fields, change the layout, and change the styling of the form, empowering them to tailor and adjust the app to fit their business needs. We suggest using XSLT and Bootstrap because both technologies integrate well with SharePoint List XML.

To customize the form, the user navigates to the SharePoint List then adds a new column. Next, get the XML for the SharePoint list:

STRING SFIELDXML = NULL; USING (DALCONTROLLER DAL = NEW DALCONTROLLER(THIS.CONTEXT)) { TICKET T = DAL.TICKETS.SELECTBYID(TICKETID); IF (T != NULL) { SJSON = T.TOSTRINGJSON(); SFIELDXML = T.TOSTRINGFIELDSXML(); } }

Pass the XML to a function which trims any unnecessary information and builds a new string to hold it:

PUBLIC STRING TOSTRINGFIELDSXML() { STRINGBUILDER SB = NEW STRINGBUILDER(); USING (XMLWRITER W = XMLWRITER.CREATE(SB)) { W.WRITESTARTDOCUMENT(); W.WRITESTARTELEMENT("FIELDS"); FOREACH (TICKETFIELD F IN THIS.FIELDENTITIES) { W.WRITESTARTELEMENT("FIELD"); //WRITE THE FIELD HEADER ATTRIBUTES W.WRITEATTRIBUTESTRING("ID", F.SPFIELDID); W.WRITEATTRIBUTESTRING("FORMID", F.ID.TOSTRING()); W.WRITEATTRIBUTESTRING("FIELDNAME", F.FIELDNAME.TOSTRINGNULLSAFE()); W.WRITEATTRIBUTESTRING("FIELDTYPE", F.FIELDTYPE.TOSTRINGNULLSAFE()); W.WRITEATTRIBUTESTRING("FIELDTYPEID", F.FIELDTYPEID.TOSTRINGNULLSAFE()); W.WRITEATTRIBUTESTRING("REQUIRED", F.ISREQUIRED.TOSTRINGNULLSAFE()); W.WRITEATTRIBUTESTRING("VALUE", F.VALUE.TOSTRINGNULLSAFE()); W.WRITEATTRIBUTESTRING("ACTIVE", F.ISACTIVE.TOSTRINGNULLSAFE()); //WRITE FIELD PROPERTIES AS ATTRIBUTES LIST<STRING> LSTCHILDELEMENTPROPS = NEW LIST<STRING>(); FOREACH(STRING KEY IN F.PROPERTIES.KEYS) { SWITCH (KEY.TOUPPERINVARIANT()) { DEFAULT: W.WRITEATTRIBUTESTRING(KEY.TOLOWER(), F.PROPERTIES[KEY]); BREAK; CASE "NAME": BREAK; CASE "CHOICES": LSTCHILDELEMENTPROPS.ADD(KEY); BREAK; } } //WRITE THE FIELD PROPERTIES THAT ARE CHILD ELEMENTS FOREACH (STRING KEY IN LSTCHILDELEMENTPROPS) { INT ICOUNT = 1; SWITCH (KEY.TOUPPERINVARIANT()) { CASE "CHOICES": W.WRITESTARTELEMENT("CHOICES"); STRING[] SCHOICES = F.PROPERTIES[KEY].TOSTRINGNULLSAFE().SPLIT(';'); FOREACH (STRING SCHOICE IN SCHOICES) { IF (!STRING.ISNULLORWHITESPACE(SCHOICE)) { W.WRITESTARTELEMENT("CHOICE"); W.WRITEATTRIBUTESTRING("ID", ICOUNT.TOSTRING()); W.WRITEVALUE(SCHOICE); W.WRITEENDELEMENT(); ICOUNT++; } } W.WRITEENDELEMENT(); BREAK; } } W.WRITEENDELEMENT(); } W.WRITEENDELEMENT(); W.WRITEENDDOCUMENT(); } RETURN SB.TOSTRING(); }

Get the XSLT:

string xslt = "<xsl:stylesheet xmlns:xsl='http://www.w3.org/1999/XSL/Transform' version='1.0'>" + "<xsl:template match='/'>" + "<xsl:for-each select='/Fields/Field'>" + "<div class='divRow form-group form-group-sm getFieldTitle'>" + "<label class='col-sm-2 control-label' style='text-align: center' for='formGroupInputSmall'><xsl:value-of select='@FieldName'/></label>" + "<div class='divRowRightCol col-sm-10'>" + "<xsl:if test=\"@FieldType='Text'\">" + "<input class='form-control getInputID' isRequired='{@Required}' id='Text_guidID{@ID}' type='text' value='{@Value}' placeholder='Enter Some Text' disabled='disabled'></input>" + "</xsl:if>" + "<xsl:if test=\"@FieldType='DateTime'\">" + "<div class='date' id='datetimepicker_guidID{@ID}' format='{@format}'>" + "<input type='text' class='form-control datepicker getInputID' isRequired='{@Required}' id='Date_guidID{@ID}' format='{@format}' value='{@Value}' placeholder='Enter a Date: MM/DD/YYYY' disabled='disabled' />" + "</div>" + "</xsl:if>" + "<xsl:if test=\"@FieldType='MultiChoice'\">" + "<div class='checkbox getInputID' id='divMultiChoice_guidID{@ID}' isRequired='{@Required}'>" + "<xsl:for-each select='./Choices/CHOICE'>" + "<xsl:variable name='checkboxValue'><xsl:value-of select='.'/></xsl:variable>"+ "<xsl:choose>" + "<xsl:when test='contains(../../@Value, string($checkboxValue))'>" + "<label class='checkbox-inline' id='lblCheckbox_guidID{../../@ID}'>" + "<input type='checkbox' class='getCheckboxID' isRequired='{../../@Required}' name='inlineCheckbox' id='MultiChoice_guidID{@ID}' value='{.}' checked='checked' disabled='disabled'></input> <xsl:value-of select='.'/>" + "</label>" + "</xsl:when>" + "<xsl:otherwise>" + "<label class='checkbox-inline' id='lblCheckbox_guidID{../../@ID}'>" + "<input type='checkbox' class='getCheckboxID' isRequired='{../../@Required}' name='inlineCheckbox' id='MultiChoice_guidID{@ID}' value='{.}' disabled='disabled'></input><xsl:value-of select='.'/>" + "</label>" + "</xsl:otherwise>" + "</xsl:choose>" + "</xsl:for-each>" + "</div>" + "</xsl:if>" + "</div>" + "</div>" + "</xsl:for-each>" + "</xsl:template>" + "</xsl:stylesheet>";

Convert the XML to HTML by passing the fields through the XSLT:

public static string TransformXMLToHTML(string inputXml, string xsltString) { if (!string.IsNullOrWhiteSpace(inputXml)) { XslCompiledTransform transform = new XslCompiledTransform(); using (XmlReader reader = XmlReader.Create(new StringReader(xsltString))) { transform.Load(reader); } StringWriter results = new StringWriter(); using (XmlReader reader = XmlReader.Create(new StringReader(inputXml))) { transform.Transform(reader, null, results); } return results.ToString(); } return null; }

Decode the HTML and assign it to a literal:

if (!string.IsNullOrWhiteSpace(html)) { litTable.Text = HttpUtility.UrlDecode(html); }

On the client, the form appears in the literal, rendering as HTML.

<div class="form-horizontal" style="border: 1px solid gray; padding: 15px;"> <asp:Literal ID="litTable" runat="server"></asp:Literal> </div>

Finally, the form is ready to display. A list containing the following column--

--displays the following customized, responsive form:

Please share if you thought this post was worth reading!