Using CSS to customize the look of a SharePoint Search Box Web Part

I recently received a request from one of our users about dropping a Search Box web part on a page of their site that would provide users with the ability to search for local content on this site.  This typically isn't a problem; however, in this situation, we already had a Search Box web part installed on the site via the master page with a rather heavily customized look.  Unfortunately, that look didn't go well at all with this new web part so, to fix the problem, I dropped an Embed Code/Script Editor web part at the bottom of their web page and added the following CSS that brought the Search Box back to a more "normal", but slightly customized look:

Here's the look they wanted (nothing really fancy, as you can see):

Here's the CSS:

<style>
   #WebPartWPQ2 #SearchBox {
      width: 650px;
   }

   #WebPartWPQ2 .ms-srch-sbLarge > .ms-srch-sb-searchLink {
      background-color: #fff;
      float: right;
      color: #fff;
      text-decoration:none;
      height: 24px;
      width: 33px;
   }


   #WebPartWPQ2 .ms-srch-sbLarge>input {
      border: 1px solid black;
      border-radius: 5px;
      font-size:16px;
      height:30px;
      width: 600px;
      margin: 0px 0px 0px 0px;
      padding: 5px 1%;
   }

   #WebPartWPQ2 .ms-srch-sbLarge-searchImg {
      position: relative;
   }
</style>

NOTE: I'm specifically targeting their web part's ID, WebPartWPQ2; therefore, you'll want to change that to reflect the ID of you web part or remove it if you want all Search Boxes to inherit that particular look.

CSOM CamlQuery Example - Returning list items that fall within a specified date range

Since CamlQuery isn't very intuitive or easy to work with, I thought I'd put together a serious of posts that display some examples that you can use in order to make it work better for you.

In this particular example, I'm connecting to a SharePoint list and performing the following activities:

1. Filtering the list items that were created within a specified date range while, also, ignoring the time values.  NOTE:  If you need to include the time values, simply change the IncludeTimeValue attribute from FALSE to TRUE.
2. Ordering the list so that it returns the most recently created items first and older items last

So that you can focus on the actual CamlQuery structure, I've greatly simplified the code as follows:

var selectedMinDate = '2018-1-1';
var selectedMaxDate = '2018-1-31';

var camlQueryText = "<View><Query><Where><And><Geq><FieldRef Name=\'Created\' /><Value Type=\'DateTime\' IncludeTimeValue=\'FALSE\' >"
+ selectedMinDate + "</Value></Geq><Lt><FieldRef Name=\'Created\' /><Value Type=\'DateTime\' IncludeTimeValue=\'FALSE\' >"
+ selectedMaxDate + "</Value></Lt></And></Where><OrderBy><FieldRef Name=\'Created\' Ascending=\'False\' /></OrderBy></Query></View>";

var ctx = new SP.ClientContext.get_current();
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(camlQueryText);
this.items = ctx.get_web().get_lists().getByTitle('NameOfList').getItems(camlQuery);
ctx.load(items);
ctx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

function onQuerySucceeded(sender, args) {
     while (listItemEnumerator.moveNext()) {
          var oListItem = listItemEnumerator.get_current();
          var itemInfo = oListItem.get_item('Title') + " - " + oListItem.get_item('Created');
          alert(itemInfo);
     }
}

function onQueryFailed(sender, args) {
     alert('request failed ' + args.get_message() + '\n'+ args.get_stackTrace());
}

Customizing how a ToolTip is displayed using CSS

I was messing around with various ways to customize the look of a tooltip and happened to stumble across an incredibly simple solution utilizing CSS.  In this particular instance, the "tooltip" will appear to the immediate right of the anchor tag's text in a nice, friendly-looking blue box.  Nothing fancy, but something you could easily build on if you like.

Here's the code:

<style>
        .toolTip:hover {
            text-decoration: none;
        }

        .toolTip:hover:after {
            content: attr(data-tooltip);
            text-decoration:none;
            position: absolute;
            background: #40ABF0;
            padding: 3px 7px;
            margin-left: 7px;
            margin-top: -3px;
            color: #FFF;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
</style>




...



<a href='urlOfSite' target='_blank' class='toolTip' data-tooltip='Text to show in the custom tooltip!'>

Using CSS to cause an image to "expand" when hovered over

I just stumbled across some interesting code written by one of my co-workers that utilizes CSS to cause an image to expand slightly when the user of the web page hovers over it.  As you might guess, this would be perfect for highlighting clickable components such as buttons and the like.  This idea was so clever that I thought I'd share:

<style>
        .imgButton {
          display: inline-block;
          vertical-align: middle;
          -webkit-transform: perspective(1px) translateZ(0);
          transform: perspective(1px) translateZ(0);
          box-shadow: 0 0 1px transparent;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-transition-property: transform;
          transition-property: transform;
        }
        .imgButton:hover, .imgButton:active, .imgButton:focus {
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
        }

</style>

...

<img src="pathToImageFile" class="imgButton" />

Making sure the Time Component is accounted for in a DateTime CAML Query

The key to making certain that the time component is leveraged when you're performing a datetime comparison in a CAML Query is to include the IncludeTimeValue attribute in your query with a value set to "TRUE".

In the following example, I leveraged a javascript CSOM CAML query to only return items in my image library called "Banners" in which the current datetime falls within the boundaries specified in my custom StartDate and EndDate datetime fields of the image library:

<View>
 <Query>
  <Where>
   <And>
    <Leq>
     <FieldRef Name=\'StartDate\'/><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'><Today /></Value>
    </Leq>
    <Geq>
     <FieldRef Name=\'EndDate\'/><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'><Today /></Value>
    </Geq>
   </And>
  </Where>
 </Query>
</View>

Here is a more complete version of the code that I used:

function execRequest_Banner() {
     var ctx_Banner = SP.ClientContext.get_current();
     var camlQuery_Banner = new SP.CamlQuery();
     // Filter the image to display based on the following criteria:
     // 1) Only display images in which today's date falls within the Start and End Date range
     // specified

     camlQuery_Banner.set_viewXml('<View><Query><Where><And><Leq><FieldRef Name=\'StartDate\'/>
<Value Type=\'DateTime\'><Today /></Value></Leq><Geq><FieldRef Name=\'EndDate\'/>
<Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'><Today /></Value></Geq></And>
</Where></Query></View>');
     this.items_Banner = 
     ctx_Banner.get_web().get_lists().getByTitle('Banners').getItems(camlQuery_Banner);
     ctx_Banner.load(items_Banner);
     ctx_Banner.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded_Banner),
     Function.createDelegate(this, this.onQueryFailed_Banner));
}

Hide components located on the SharePoint Online master page, oslo.master

In order to hide various components located on the oslo.master master page of SharePoint Online site, a brutally simple solution is to insert a Script Editor web part on the web page and add one or more of the following CSS elements to it:

<style>

     .ms-srch-sb {display:none;}

     .ms-core-pageTitle {display:none;}

     #pageContentTitle { display:none;}

     #titlerow { display:none;}

</style>

Just a quick warning, placing all of these CSS elements on the web page is going to turn the web page into a blank page (that is, if you don't have any content on it) so feel free to remove any of those CSS elements listed above if you want that component to be displayed.

Here is a key that explain which element removes which control:

.ms-srch-sb {display:none;} - removes just the Search control
.ms-core-pageTitle {display:none;} - removes just the Page Title
#pageContentTitle { display:none;} - removes just the Site Title
#titlerow { display:none;} - removes the Site Logo, Site Title, and Search Control

RequiredExpressionValidator expression to limit the number of characters entered in a textbox

For the ASP.NET project that I'm currently working on, I wanted to limit the number of characters that could be entered into a specific textbox control to a maximum of 25 characters (NOTE: since this was a required field so I also wanted them to at least enter 1 character); however, in this particular instance, I wanted to allow the user to be able to enter any kind of special character.  To provide this capability, I used the following value for my ValidationExpression:

^.{1,25}$

Now, if I did want to limit the type of characters entered to be only alpha-numeric and empty spaces, I used the following:

^[a-zA-Z0-9 ]{1,25}$