Parlae Solutions Blog

Using XSLT with Bootstrap in a SharePoint App

 

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:

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

Get the XSLT:

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

Decode the HTML and assign it to a literal:

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

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

Blog Image

--displays the following customized, responsive form:

Blog Image

Please share if you thought this post was worth reading!

 

Schedule a Free Consultation

Thank you for your interest in Parlae Solutions. One of our team members will be happy to assist you. If you prefer to be contacted by phone, please provide a phone number and the best time to reach you in your message. If you need immediate assistance, please call (216) 239-1220.