Wednesday, March 13, 2019

Adding First Letter (Users Last Initial) filters to a list view web part.

Introduction

In SharePoint, you can create a diverse set of lists to hold your data, whether they be documents, service requests, or process tracking. The view tools provided by SharePoint with the various filter and grouping tools are useful for managing that data and making it easier to find a specific record.

If the list grows very large those view and filter tools may not be sufficient to find the specific records you are looking for quicky and easily. In our case, we have thousands of records submitted by various users that need to be tracked. A quick way to narrow down the list is to filter that list by the users last initial. The screenshot below shows the alphabetic filter above the list, and the list it filters below it. So, clicking the "B" on the top list of links filters the list below by all users who's last name begins with B. Clicking any other letter will extract all user records that have that last initial. Clicking "Clear" clears the filter and shows all of the records in the default view set up for that page.

List with last initial filters connected.  "B" selected.


Part One

Modify the list to extract the last letter of the field to be searched.


The first step is to extract the first letter of the field you wish to filter.

If you are using a straight text field (Single Line of Text), you can extract the first letter using a calculated column. Create a new calculated column that will hold the first letter on the list you wish to filter. Use the following formula in your field:

=LEFT([YourField],1)

where "YourField" is the column that you are extracting the first letter from.

If you want to extract from a complex field such as "Created By", you will need to use a workflow to extract that value.

As above, create a new column in your list but make it a straight text field, rather than a caluclated column.

Open SharePoint designer, and create a new list workflow named something like "Capture last initial". Ensure it is triggered whenever an item is created. Also ensure that the workflow can be manually started. This allows you to populate the new field with existing records extracted last letter.

Create two new workflow variables. One named "Captured Name" and one named "Last Initial". Both are strings.

For your first line of the workflow, choose "Action". Select "Set Workflow Variable". Choose "Captured Name" as the variable, and select the field "Current Item", "Created By", and select "Display Name" as in the screenshot below:

Captured Name should be display name version of current item created by


For the second line, again choose "Action", and select "Extract Substring from start of string". Choose your captured name variable as the extracted string, and choose "Copy 1 character from the start". Next, set the output variable as your last initial variable. See the workflow screenshot for more clarity. Finally, update the current items field you just created in the source list (last initial) to the value in the last initial variable:

Completed workflow that selects last initial
Either of these two steps will populate the last letter field. This field is then used in our query string filters.

Part Two

Create the list of links to generated the URL Filter link.


First, we need a page that both hosts the list you wish to filter and the Content Editor Web Part and Query filter web part used to filter the list. Create a new web part page and add your list to be filtered to that page. Select the view that is most appropriate using the web part configuration components.

Add a content editor web part to the top of your page.

Next, we need to create some HTML that has the filter letters embedded in the URL. Here is the link format:


Create 26 of these, modifying the Initial and display letter to include each letter of the alphabet.

In your content editor webpart, insert the links you created into the following html. This will format the letter based links into something more useable, and add two "clear" boxes to remove all filters from the associated list:



Save your webpart page. You should now see something similar to the screenshot at the beginning of this article.

Part Three

Use the Query filter web part to pass link values to filter list.


The final step is getting your clicked link values passed to the list below to filter that list. This is done using a query string filter. Add a new webpart to your page and, in the "Filters" section, choose "Query String URL Filter".

Add this to your page. Click on the query string filter on your page, and choose "Edit Web Part". Leave the filter name as query string, unless you want to change it. For the query string parameter, insert the parameter we have embedded in our html described above "Initial". Click "OK".

Now, on the query string filter web part, click the drop down arrow on the right side and choose "Connections". Then choose "Send Filter Values To". Then select your embeded list on this page as your choice. If you only have one list on this page it should be your only choice.

Save your page. If you are generating your last letter with a calculated field, your filters should now work. If you are generating the last letter by workflow, then you will need to manually run the workflow for each item in your list. Its a good idea to set this up before the list gets too large, if you have that forsight. If you are generating the last letter by workflow and already have a large number of records in the list, then you can manually enter the last letter for each record using datasheet view.

Once this last letter field is populated, you should now be able to filter the list by clicking the letter links.

Monday, March 4, 2019

Create a Bootstrap enabled SharePoint Site

Introduction


This post covers the steps needed to set up a SharePoint site for the creation of web pages that support current web technologies including Bootstrap.  These web pages have much more freedom in design and dynamic toolsets than the restrictions provided by the native SharePoint toolset, and it allows the creation of pages that automatically adapt to any device used.

Create Site and Add Supporting Libraries

The first step is to create a standard SharePoint site.  This site can use any number of the SharePoint site templates provided, you can select one that provides specific tools that you need, or simply a team site to get started.  A team site is used in this example.
Bootstrap uses javascript jquery files to enable specific functionality, so first download the supporting libraries for jquery here:
Rename the jquery file you just downloaded to simply jquery.js (extension hidden in windows).  Then add to your SharePoint sites site assets library.
Next, you need to download the resources used for Bootstrap.  Navigate to the bootstrap website:
and download the latest fully tested version of Bootstrap (not Beta or Alpha).  Unzip the file.  Copy the following components from the bootstrap folders to your site assets library (extensions may be hidden in windows):
bootstrap.min.css
bootstrap.min.js
Finally, create a blank text document and title it “style.css”.  Place this document in the site assets library as well.  Your site assets library should now look like:

Next, we create a library for our images.  While we could put images in the site assets library, an image library provides an image preview and other functionality useful when managing multiple images.
Navigate to site contents in your SharePoint site, choose “add an app”, and choose “Picture Library”.  Name your picture library what you wish, I called mine “Site Images”.

Create Site Page

Now that you have the supporting assets ready, you can create your site page.  Open SharePoint Designer and open your site.
Click on your “Site Pages” library.
In the top ribbon, “New” section, choose “Page” -> “ASPX”.  Do not choose “html” as SharePoint security will not allow it to render.  Rename your page away from the default “untitled”.
Open your new site page.  SharePoint will have included some markup by default on the page.  Remove the opening and closing “form” tags.  Leave the rest.  Save the page.


Link Site Page to Supporting Libraries

In your new site page, expand the “head” section.  First, add links to both the bootstrap stylesheet and your custom stylesheet.
In the head section of your new page, create the link to the Bootstrap style sheet, as follows:
<link rel="stylesheet" type="text/css" href="../SiteAssets/bootstrap.min.css"></link>
Repeat for the four other supporting components so that you end up with this:
<link rel="stylesheet" type="text/css" href="../SiteAssets/bootstrap.min.css"></link>
<link rel="stylesheet" type="text/css" href="../SiteAssets/style.css"></link>          
<script type="text/javascript" src="../SiteAssets/jquery.js"></script>
<script type="text/javascript" src="../SiteAssets/bootstrap.min.js"></script>
Click on each of these links in SharePoint Designer.  If they are configured properly, SharePoint Designer should open the corresponding file.

Test jQuery

Next, we will insert some test script to ensure that jQuery is loading and functioning properly.  In the head section of your new webpage, insert the following text:
<script type="text/javascript">
$(document).ready(function()
               {
                              alert('jquery loaded');
               });
</script>

Save your page in SharePoint Designer.  Navigate to your SharePoint site, and open your new site page located in your site pages folder.  If you see a alert that says ‘jquery loaded’, then you are ready to proceed.  If not, check your links of accuracy and the format of your html page.

Create Your Page Using Bootstrap

Your page is now ready for creation using the many features of bootstrap.  If you are familiar with the technology, proceed!  If not, here is a starting point.
Within the “body” tags, add three new sections.  “Header”, “Section”, and “Footer” as follows:
<header></header>
<section></section>
<footer></footer>
Within each of these tags, add opening and closing “container” tags as follows:
<header>
               <div class=”container”></div>
</header>

<section>
               <div class=”container”></div>
</section>

<footer>
               <div class=”container”></div>
</footer>

Next add the row tags as follows:

<header>
               <div class=”container”>
                              <div class=”row”></div>
</div>
</header>

<section>
               <div class=”container”>
<div class=”row”></div>
</div>
</section>

<footer>
               <div class=”container”>
<div class=”row”></div>
</div>
</footer>

Finally, add the column divs to allow you to start adding content:

<header>
               <div class=”container”>
                              <div class=”row”>
                                             <div class=”col-md-4”>
                                                            This is four column row section.
                                             </div>
                                             <div class=”col-md-8”>
                                                            This is an 8 column row section.
                                             </div>
</div>
</div>
</header>

Build out the other sections and footer of your page with some html.  Save and view in SharePoint.  Tweak as needed.
Add a Bootstrap button within one of your rows using the following syntax:
<a href="#" class="btn btn-default">Button</a>
Add an image to your site page as follows (after first placing it in the site images library):
<img  alt="Island Health Logo" src="../Site%20Images/IslandHealthLogo.gif"></img>
If you want to add custom styles to this page, use the style.css file created earlier and placed in the site assets library.  You can access this library from directly in SharePoint Designer, enabling easy flipping back and forth between your page and the style sheet.   Do not modify the style css that comes with bootstrap.
You can now build out your page as you wish using all of the features of bootstrap.