Steve's SharePoint Nuggets: 2019

Wednesday, June 12, 2019

Hide fields on a SharePoint list form

When you create a list in SharePoint, there may be certain fields that you wish to hide on the list forms. One example of this is a request form. The end user fills out the form for you to process. You have some variables associated with that form, such as "status", that you don't want the end user to be able to see or change.

The code below hides form fields that are specified in the "hideFields" function. The code does not require any additional supporting classes such as jquery. This code can be put in a content editor web part on your form, or added directly to the form in SharePoint designer.

Be aware that the field names that your are going to hide are the SharePoint names for that field, not necessarily the name presented in the list. If you open your list and go to list settings, placing your pointer over the variable name will show the SharePoint name in the link:

/news/_layouts/FldEdit.aspx?List=%7B354E90D9%2D5763%2D491F%2DAA44%2DFA42D5838B4C%7D&Field=Title

This fields name is "Title" even though in the SharePoint list it is listed as "Headline".

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:

http://jquery.com/download/

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:

https://getbootstrap.com/

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:

Repeat for the four other supporting components so that you end up with this:

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:

$(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:

Within each of these tags, add opening and closing “container” tags as follows:

</header>

</section>

</footer>

Next add the row tags as follows:

</div>

</header>

</div>

</section>

</div>

</footer>

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

This is four column row section.

</div>

This is an 8 column row section.

</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):

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.

Friday, February 8, 2019

SharePoint - Building What You Want How You Want. (Using SharePoint as a web host)

SharePoint OOB

SharePoint out of the box provides a rich toolset to allow you to build a web based system with lists, document libraries, content pages and custom elements. If the project or issue you are working on fits well with the toolset, you have deep knowledge of SharePoint, and if you have a pliable client who is willing to tweak processes to work with SharePoint, then you have a fast functional solution package.

However, using the out of the box components of SharePoint restricts you in both functionality and look and feel.

One of the typical starting points of new projects is a wireframe, approved by the client and ready to replicate. Trying to replicate a custom wireframe in SharePoint however can be very challenging and require changes to master pages, site layouts, and other elements to obtain a certain look and feel. And if it includes HTML5 dynamic elements and other current web technologies, out of the box SharePoint may not support it at all.

SharePoint is most efficient and powerful when you can use the out of the box components, but customization can end up taking more time than developing a system a different way.

SharePoint Development

One way to handle the challenge of needing custom functionality and appearance is to code the solution in Visual Studio and deploy the resulting package to the SharePoint farm for deployment. However, this requires a deep skill set, and an environment set up to support release of new applications through SharePoint. And for smaller projects, the time and effort is also not justified.

So, for a larger scale application that is to be hosted in SharePoint, with a supportive environment, developing using code can be an acceptable way of meeting specifications.

But for smaller applications, a few custom pages, perhaps even a single page based on a precise wireframe, there is another alternative.

Using SharePoint as a Web Host

If you create a blank aspx page for SharePoint in SharePoint designer, you can put any design, any css, and text you wish on that page. You have, as with any web page, complete control of the design. You are not restricted by the appearance or functionality provided by SharePoint, you can create the page from scratch.

This means you do not need a .net developer to create the custom page, you do not need the overhead of creating and deploying through the farm, you can simply create a standalone page that exactly meets your requirements.

And if you wish to add css and custom java scripts, you can add those to existing site assets libraries and simply link to them in the head of your aspx page.

Your page is still protected by the SharePoint permissions model, so you can control access as you would with any SharePoint resource.

What about functionality? If you use the SPServices jquery libraries for SharePoint, you can query and update any list that is hosted on the same site in your code. So, you can create dynamic web pages that are populated using SharePoint lists. This has the added advantage of allowing end users to modify the content using the list, without having to deal with HTML updates and approvals.

So, instead of using SharePoint's built in toolset, you instead use it more like a web host. It hosts your web pages and resources, it hosts your jquery and SP services libraries. It provides and updates dynamic data to your pages. And it is covered by the SharePoint security model. This way, particularly for smaller projects or non .net skillsets, you can achieve exactly what you need without being obstructed by SharePoints OOTB functionality.

Create a Stand Alone Web Page

Open SharePoint Designer, open your site that you with to host the page, and select a new aspx page for that site.
Put any css or other resources in the same sites site assets library and link to those libraries in the head section of your new web page.
Build your page as any web page, you have complete control of look and feel. Use html5, keyframes and any other web technologies you wish. Save it and view it.

Add data source

Download the SPServices jquery libraries and put into your site assets library.
Add a link in the head section of your page to the jquery libraries for the two libraries needed, like this: <script type="text/javascript" src="https://..SiteAssets/jquery.SPServices-2014.02.js"></script>
Using JavaScript and jquery, connect to your supporting lists and extract the data you wish to display on the page. As we are developing this from scratch, we are not limited to list views or other ways of displaying data, we can build the interface to whatever we wish.

SharePoint Web Page Hosting

So, if you want to be able to create a page from a wireframe, use the latest HTML5 and css tools, and have complete control over functionality, then creating stand alone pages can achieve that functionality with a standard web developer skill set. No need for the overhead of Visual Studio and application deployment, no need for a .net developer or help from the SharePoint farm team. You can independently develop and release custom web pages to support your projects as needed.