Introduction to Office UI Fabric

Shocker, I’m not a design expert. Don’t get me wrong, I can do design work. I can create a user experience that is simple, elegant, and gets the job done. It’s just going to take me a lot longer than someone who does design for a living, and I’m sure it can be improved on by someone who focuses solely on design. I know.. I know.. you thought I was perfect. Sorry to all the fans I’ve let down.

I mean, the countless hours I’ve spent over my lifetime looking for icons to use, tweaking colors to make sure the are “web friendly”, styling tables and panels so that they have SOME sort of style to them.  Sometimes the look and feel of an application takes longer to create the actually functionality behind the scenes to DO the work.

You might be a developer if… 

So, I was immediately interested when I heard about Office UI Fabric.  What is this Office UI Fabric you may be asking? Excellent question! Well, according to the site:

The Office UI Fabric is The front-end framework for building experiences for Office and Office 365. It is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language. It’s easy to get up and running with Fabric – whether you’re creating a new Office experience from scratch or adding new features to an existing one.

Okay… so what is it??

Office UI Fabric is a couple of css files that help you implement the design aspects of your web applications. It has features such as Panels, Dialogs, Callouts, Spinners, Date Pickers… etc.. etc…  In addition is has a set of Typography features for font sizes and colors which help you stay consistent in your development of applications. It also has a TON of useful icons to choose from (this is by far one of my favorite features).  These icons can be made larger and smaller and have the color affected by the Typography features. That just saved future me hours of hunting for the one icon I need (they even have a cat icon… really???)  No.. they don’t have a bacon icon.. :(

Anyway, another thing that’s really great is that you can start using Office UI Fabric IMMEDIATLEY. It completely compliments any client side development efforts you are currently undertaking. In fact, since it’s just css files you don’t even have to be on Office 365 or SharePoint 2013.

In an effort to learn Office UI Fabric I put together a session for the COLLAB365 Online Conference about it. My session is at 10:00am Central time on Thursday October 8th if you want to check it out. In this session I’ll walk you through the basics of getting started with Office UI Fabric. We’ll build up some functionality using some of the key features I’ve played with in Office UI Fabric:

  • Typography
  • Icons
  • Tables
  • Responsive Grid
  • Callouts

Of course, we’ll just be scratching the surface but it will give you the basics you need to get off and running. The final demo of the session pulls together all of the above features into one example. That script is also the script used in this blog post to highlight these same features.

Get on with it! How do we use Office UI Fabric

Okay.. okay.. sheesh.. impatient much? There are a couple of things you need to be aware of when using Office UI Fabric (as of the writing of this blog).

It’s not 100% baked

This is new functionality. Not everything works 100% yet. You’ll find some quirks trying out different features and components. For instance, there is an “Overlay” component that can be used to gray out a portion of the screen, however the functionality is not implemented to prevent interaction with the components underneath the overlay. You’ll need to write some of this functionality yourself.  In fact you can submit your changes to GitHub if you want to be really helpful and they may integrate them into the framework: https://github.com/ngOfficeUIFabric/

You’ll need to write some JavaScript

For some of the components you will need to write some (a lot?) of JavaScript for them to actually work. A great example of this is the callouts. If you just implement a callout as the web site shows you, you will indeed see a callout on the screen.  However, the callout will always be visible. It likely won’t be positioned on the page where you want it and it won’t disappear when you click the “x” icon.  You have to write all of that functionality yourself.  My hope is that someday in the future there will be a corresponding JS file to go along with the Office UI Fabric css files that does most of this heavy lifting for you (think jQuery UI).  In my example script below we’ll be implementing the callouts and the JavaScript necessary to make it work.

The Example

Okay, now that we have the caveats out of the way. Let’s dig into the example.  In the example script below we are going to implement a few of the features of Office UI Fabric:

  • Responsive Grid – We are using SharePoint’s REST to query an Issues list and populate the results of the query into the Responsive Grid Component.
  • Icons – We are creating an “information” icon as the first column and using the Icon feature to display the icon.
  • Typography – We are using the Typography feature to set the font size and color of the header row of the Grid as well as to set the size of the color of the Icon.
  • Callouts – When a user clicks on the icon, we’ll be using the callouts component to pop-up a callout that displays content.  Yes, there is JavaScript to show the callout, hide the callout, and position the callout accordingly.
  • Tables – Within the callout we are displaying information about the issue selected after clicking on the corresponding icon. The information in this callout is retrieved using REST and formatted using the Table component of Office UI Fabric.

In order to use the script below “as is”, you’ll need an Issue Tracking list named “Issues” in Office 365 (because of the REST queries).  You could easily tweak the script below to work with other versions of SharePoint by changing the REST queries and data manipulation accordingly.  As usual, I’ve also thrown together a quick video walking you through using the script.

If this is just too much content to throw at you at once, please check out my session on Thursday and I’ll walk through in a lot more detail.

The Script

Here’s the script. Remember, this is a teaching aid, not a “throw into production” solution.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!-- References to Office UI Fabric -->
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">

<!-- Callout div -->
<div class="ms-Callout ms-Callout--arrowLeft" id="callout" style="display:none">
<div class="ms-Callout-main">
<div class="ms-Callout-header">
<p class="ms-Callout-title">Callout Left Arrow <i class="ms-Icon ms-Icon--x" onclick="$('#callout').fadeOut();"></i></p>
</div>
<div class="ms-Callout-inner">
<div class="ms-Callout-content">
<p class="ms-Callout-subText ms-Callout-subText--s" id="calloutContent"></p>
</div>
</div>
</div>
</div>

<!-- Responsive Grid -->
<div id='issueGrid' class="ms-Grid">
<div class="ms-Grid-row ms-font-l ms-fontColor-blue">
<span class="ms-Grid-col ms-u-sm1"></span>
<span class="ms-Grid-col ms-u-sm3">Title</span>
<span class="ms-Grid-col ms-u-sm2">Assigned To</span>
<span class="ms-Grid-col ms-u-sm2">Priority</span>
<span class="ms-Grid-col ms-u-sm2">Status</span>
<span class="ms-Grid-col ms-u-sm2">Due Date</span>
</div>
</div>

<script type="text/javascript">

var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Issues')/items?$select=Id,Title,AssignedTo/Title,Status,Priority,DueDate&$expand=AssignedTo",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=nometadata"
}

});
call.done(function (data,textStatus, jqXHR){
//add issus to issueGrid using results of REST query
rows = '';
for (index in data.value)
{
rows += '<div class="ms-Grid-row">';
rows += '<span class="ms-Grid-col ms-u-sm1"><i class="ms-font-xl ms-fontColor-alert ms-Icon ms-Icon--infoCircle" onclick="GetInfo(this,'+data.value[index].ID+')"/></span>';
rows += '<span class="ms-Grid-col ms-u-sm3">'+data.value[index].Title+'</span>';
rows += '<span class="ms-Grid-col ms-u-sm2">'+data.value[index].AssignedTo.Title+'</span>';
rows += '<span class="ms-Grid-col ms-u-sm2">'+data.value[index].Status+'</span>';
rows += '<span class="ms-Grid-col ms-u-sm2">'+data.value[index].Priority+'</span>';
rows += '<span class="ms-Grid-col ms-u-sm2">'+data.value[index].DueDate+'</span>';

rows += '</div>';
}
$("#issueGrid").append(rows);

});

call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Issues: " + jqXHR.responseText);
});

function GetInfo(element,id)
{
//get information for specific issue (Id of clicked on Isse in grid)
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Issues')/items?$select=Id,Title,AssignedTo/Title,Status,Priority,DueDate&$expand=AssignedTo&$filter=(ID eq "+id+")",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=nometadata"
}

});
call.done(function (data,textStatus, jqXHR){

$("#calloutContent").empty();
//build Table with results of REST Query
var content = '<div class="ms-Table">';
content += '<div class="ms-Table-row"><span class="ms-Table-cell">TITLE:</span><span class="ms-Table-cell">'+data.value[0].Title+"</span></div>";
content += '<div class="ms-Table-row"><span class="ms-Table-cell">ASSIGNED TO:</span><span class="ms-Table-cell">'+data.value[0].AssignedTo.Title+"</span></div>";
content += '<div class="ms-Table-row"><span class="ms-Table-cell">STATUS:</span><span class="ms-Table-cell">'+data.value[0].Status+"</span></div>";
content += '<div class="ms-Table-row"><span class="ms-Table-cell">PRIORITY:</span><span class="ms-Table-cell">'+data.value[0].Priority+"</span></div>";
content += '<div class="ms-Table-row"><span class="ms-Table-cell">DUE DATE:</span><span class="ms-Table-cell">'+data.value[0].DueDate+"</span></div>";
content += '</div>'

$("#calloutContent").append(content);

//place callout after icon to positioning
$(element).after($("#callout"));

//get position of the icon clicked on
var pos = $(element).position();

//position the callout correctly over the icon
//tweaking numbers to get it correct
$("#callout").css({
position: "absolute",
top: pos.top - 55,
left: (pos.left) + 10
});

//show the callout
$("#callout").fadeIn();

});

call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Issues: " + jqXHR.responseText);
});
}

</script>

The Video

The Conclusion

As you can see, it’s pretty darn easy to get started with Office UI Fabric. I intend to keep using it and look forward to it being improved upon / added to. Whether you are writing SharePoint Hosted Add-Ins, Provider Hosted Add-Ins, or just throwing JavaScript on a page you can take advantage of Office UI Fabric.. heck you don’t even have to be creating an Office or SharePoint application and still take get the benefits. So, what’s stopping you? Go.. play.. get your hands dirty… and enjoy!

Top Ten Reasons to Attend SharePointalooza 2015

SharePointalooza is THIS FRIDAY AND SATURDAY! Holy cow, seems like I just started planning yesterday.

SharePointalooza is a two day SharePoint and Office 365 conference in Branson, MO on September 18th and 19th offering sessions and technical workshops on all things SharePoint and Office 365. Whether you are a Developer, Designer, End User, Administrator, or Business Decision Maker SharePointalooza has something for you. Whether you are an expert in your own right or have no clue what Office 365 is, there is something to help you and your business.

I know what you are thinking, yeah.. yeah.. yeah.. it’s just another SharePoint event? right? Well, my friend (I feel as though we are close enough that I can call you that). SharePointalooza is so much more than your average SharePoint conference.

In fact, let me give you the Top Ten Reasons YOU should attend SharePointalooza THIS WEEK!

10. There is NO better value for you training budget

While most multi-day conferences charge up to $2000 for the same content and speakers, registration for SharePointalooza starts at just $50. That’s right… $50… you can’t get a decent meal for that much.

image

9. Our Speakers

32 of the country’s (and Canada’s) best SharePoint experts. MVP’s, MCM’s, and Microsoft Speakers. SharePointalooza is not a training ground for new speakers. These industry experts are the same speakers who speak at other Major conferences including Microsoft’s Ignite conference. Why pay $2000 when you can pay $50 to get the same training?

image

8. Our Content

Not only do we have the best speakers, we have the content you need! Developers learn how to get started or come up to speed on new technologies. Admins, learn from those who’ve been in the trenches. If you have a question, these guys will be able to help!! You don’t have to do it all alone.

image

7. Live music from Awesome bands

We kick things off Thursday night with live music from “David Palmer and This Modern Station” at Waxy O’Sheas on Branson Landing. This event is open to the public and if you register through eventbrite you get 10% off your meal.

Friday night “North of Eight” takes the big stage on Branson Landing at 7pm to once again thrill us with a mix of amazing cover songs sprinkled with some rocking originals. I promise you that you will love this band.

image

6. The perfect conference venue

Have you been to Branson Landing and the Hilton Convention Center? The facilities and location doesn’t get any better. There’s no need to drive at all once you get to the event. Shopping, restaurants, and night life are steps away and the weather this time of year is perfect! 

image

5. Intimacy is a good thing

One of the things our attendees love the most is the access to our speakers. This event has all the same speakers and content as the huge conferences, but is small enough that you can buy your favorite speaker a drink and ask them a question or two. This it he most laid back event you will attend and well worth every penny.

image

4. Free stuff

Everybody likes free? yes? We have Quadcopters, gift cards, raspberry pi’s, amazon fire sticks, and much more! The only way to get these goodies is to attend! So REGISTER TODAY!

image

3. There is nothing else like it

Ask any one who has spoken at or attended SharePointalooza in the past. This event combines education, entertainment, atmosphere, and value like no other event. You will remember this event!

Here’s what one of our past attendees had to say:

Of all the conferences I have attended during my time as a SharePoint Content Administrator, I find SharePointalooza the best conference!  The cost is very reasonable and there is so much SharePoint talent in those two days.  They are the same people who present at the high-dollar conferences and present a wide range of high-quality material over the two-day period.  I make it a point to ALWAYS go to SharePointalooza!” – Shirley, SharePoint Administrator

image

2. Dedicated tracks

With tracks dedicated to specific topics, SharePointalooza makes it easy for you to get trained on what YOU care about.  We have entire days dedicated to Search, Business Intelligence, Development, Administration, Architecture, and even Social!  Where else can you find that kind of dedication!!! 

image

1. We’ll let this video say it all.


Register today at: http://sharepointalooza.eventbrite.com

We look forward to seeing you in Branson!

Join us for our SharePointalooza Tweet Jam!

50% OFF ALL REGISTRATIONS DURING THE TWEET JAM USING THE FOLLOWING LINK: https://sharepointalooza.eventbrite.com/?discount=TWEETJAM

image

50% OFF ALL REGISTRATIONS DURING THE TWEET JAM USING THE FOLLOWING LINK: https://sharepointalooza.eventbrite.com/?discount=TWEETJAM

What is SharePointalooza?

What makes SharePointalooza so awesome?

Why should you attend SharePointalooza?

Find out the answers to these questions and many more when you join our speakers and friends for the SharePointalooza tweet jam on August 18th at Noon CDT.

Top Ten Reasons To Attend SharePointalooza

Can you believe it? SharePointalooza is less than two weeks away! Just in case you’ve been living under a rock and have no idea what SharePointalooza is let me quickly tell you.

SharePointalooza is a two day conference in Branson, MO on September 12th and 13th offering sessions and technical workshops on all things SharePoint, Office 365, and Yammer. Whether you are a Developer, End User, Administrator, or Business Decision Maker SharePointalooza has something for you. Whether you are an expert in your own right or have no clue with Office 365 is, there is something to help you and your business. Just take a look at our awesome schedule!

http://www.sharepointalooza.org/schedule/

I know what you are thinking, yeah.. yeah.. yeah.. it’s just another SharePoint event? right? Well, my friend (I feel as though we are close enough that I can call you that). SharePointalooza is so much more than your average SharePoint conference.

In fact, let me give you the Top Ten Reasons YOU should attend SharePointalooza

10. There will not be another SharePoint Conference

That’s right! Microsoft recently announced that the beloved Microsoft SharePoint Conference is no moreSad smile Ugh! What are you to do? What could possibly fill this void in your life? I’m glad you asked! Many of the world class speakers we have at SharePointalooza are the exact same rock stars who speak at Microsoft’s SharePoint Conference. That’s right, we aren’t sticking you in a room with a bunch of first time speakers cutting their teeth on SharePoint and Office 365. These are the experts, the game changers, those people in the know and with influence at Microsoft.

Just take a look at our awesome speaker lineup  which includes MVPs, MCMs, and senior managers from Microsoft’s Office 365 team.

9. To see the look on the faces of a bunch of Canadians, a couple of Brits, and a slew of SharePoint experts when they see Branson, MO for the first time.

Yes, are awesome speakers. I can’t say enough good things about them, and they are coming from all over! We’ve got Canadians, Brits, Northeasterners, North westerners, and people from all over the country taking time out of their busy and hectic lives to share their knowledge with you. And you know what’s going to be really fun? Most of these guys have never been to Branson before. That alone is worth attending. Can you just imagine their faces when they get a full on Branson experience! It’s something they won’t forget, and you won’t either!

Just look at where we are hosting this awesome event!

8. To understand what in the world Microsoft is doing

Have all the changes Microsoft has made to SharePoint made you scratch your head? Do you wish you had some idea what they were thinking and why they made the decisions they did?? Well team! You are in luck because Group Product Manager on the Office 365 Team at Microsoft, Chris Johnson (CJ to his close personal friends) will be presenting our keynote on Friday September 12th “The road to Office 365 and the future of cloud development”. That’s right, come hear Chris as he discusses Microsoft’s thoughts behind some of their choices and their plans moving forward. Plus, he has an accent you don’t hear often in Branson. Right CJ?? I mean… Mr. Johnson.

7. Because YOU finally have a reason to visit Branson, MO AND write it off on your taxes

Branson, MO??? Yes!! Branson, MO. Did you know that over 8,000,000 families visit Branson, MO each year? AND it’s smack dab in the middle of the country making it easy for many of you to drive to. With all the shopping, restaurants, amusement parks, and shows why not bring the entire family with you! Just think, fun education, keeping the family happy, and writing it off on your taxes. Sounds like a win to me!

6. Two words… Live Music

Yes, you heard me right. Not only are we bringing you the best SharePoint and Office 365 content around, but we also found some great bands from Nashville and Chicago to come play for you on Branson Landing’s beautiful outdoor stage. How freaking cool is that? Just take a look at the videos we put together for “David Palmer and This Modern Station” and “North of Eight”. Opening up each night for these guys is one of the best duos I’ve ever heard “Bobby K & Steve”. These bands are really great and excited to play for you.

5. To learn from the best

Did I mention these speakers are the best? 12 MVPs, 1 MCM, 5 Microsoftees, and a slew of people who live and breath SharePoint and Office 365 every day ready to teach you and give you answers to your questions. Where else could you possibly have such access to this kind of talent in such an intimate setting. Go ahead, buy them a drink, see what happens. 

4. To get a couple of days off work

Think about it, you’ll need to take off work early on Thursday to get to Branson, then you’ll be having a great time learning on Friday. All for “work”. Do you really need another excuse?

3. To learn how all the SharePoint changes affect your career

SharePoint HAS changed, and who better to tell you about these changes and how they affect your career than Mr. Steve Smith, SharePoint MVP and owner of Combined Knowledge, who is traveling all the way from the UK to give our second keynote address: “SharePoint, You need to reapply for you job”. Come hear Steve share his wisdom and give you guidance. Did I mention he has a cool accent too?

2. To get free stuff

What conference would complete without free prizes. I know for a fact we’ll be giving away a Dell Venue Pro 8 and a $100 Amazon Gift card to the winner of our Registration contest (no, it’s not too late to get in on that). We’ll also be raffling off a Surface Pro 3, and a slew of other prizes including bluetooth speakers, gizmos, gadgets, and doo dads…  Gotta love free stuff!

1. Because you are important enough, good looking enough, and gosh darn it, people like you

SharePointalooza is a non-profit event. Every dime we receive goes back into the conference to make it better for YOU. These amazing speakers are traveling all the way to Branson, MO on their own dime to teach YOU. Our bands? They aren’t playing for their normal fans.. they are playing for YOU. Community events like these don’t come around every day, and without your support they aren’t possible.  So, come join us for a great weekend full of education, fun, and who knows, maybe even a new career.

Register today at: http://sharepointalooza.eventbrite.com

Can’t make it but still want to support us?  You can help us finish our funding by contributing at:  https://www.indiegogo.com/projects/sharepointalooza

We look forward to seeing you in Branson!

The SharePointalooza Registration Contest! Win Cool Stuff!

imageWow, can you believe this is our fourth conference? The first two years we held SharePoint Saturday Ozarks in Harrison, AR and then we moved it to Branson. Now, in our fourth year we are ready to blow the doors off and make this the best conference in the area.

We’ve always had a loyal following of attendees, but this year let’s really take it to the next level. In order to help achieve that goal we are creating  a contest to see who can get the most registrations.

 

This contest is open to ALL attendees! 

First, you probably care about what exactly you win??? Well, I know I would. The attendee who influences the most paid attendees to register for the event win the following awesomely great super duper prizes:

Dell Venue 8 Pro Tablet

This amazing little tablet comes with Office and runs ALL your Windows applications.

A $100 Amazon Gift Card

Let’s face it. If you want it, it’s probably available on Amazon. Put this $100 towards that new toy, gadget, or re-gift it and look like the super generous person that you are!

Upgrade to Rock Star Attendee status ($500 value)

“Rock Star” attendees status is nothing to sneeze at. Rock Star attendees get access to all speaker areas and invitations to speaker only events. In addition you’ll get a special shirt that clearly indicates the rock star that you are!

Trust me, the upgrade to Rock Star status is worth it alone.

Enough! I’m in! How do I participate?!

imageIt’s really simple. When someone registers at http://sharepointalooza.eventbrite.com there is a text box on the form for a “Registration Code”. All you have to do to participate is tell people to use your email address as the Registration Code. It’s THAT simple.

Good luck to all participants! We look forward to seeing you in September!

Keynote Speakers Announced

SharePointalooza is honored to announce our keynote speakers for the event. There are few people in this world with better insight into SharePoint and Office 365. You will NOT want to miss hearing from these two SharePoint experts who live their lives in the trenches of SharePoint.

 

image

Chris Johnson

is an avid developer, speaker, author and is a Group Product Manager on the Office 365 team at Microsoft in Redmond where he leads a team focused on making Office 365, SharePoint and Office a great place for ISVs and developers to build solutions and applications.

Chris moved to Redmond from New Zealand in 2007 to work on the software engineering team on the SharePoint 2010 release. Chris’ background is in Microsoft software development and enjoys all things technical. He is a speaker at numerous conferences around the world such as Tech.Ed, the SharePoint Conference, PDC, SharePoint Best Practices Conference, SharePoint Evolution and many smaller community events. Chris co-authored “Beginning SharePoint 2013 development” for Wrox in 2013, holds a Bachelor of Computer Science & enjoys throwing himself out of perfectly good airplanes from time to time.

 

 

image

Steve Smith

Steve is the owner of Combined Knowledge an 11 year old global Education, Support and Adoption company around SharePoint and collaboration products. Steve has been around IT and Microsoft products for far too long and has followed the transformation of SharePoint from its earliest days to the new mix of Cloud / Hybrid and On Premises deployments and is looking forward to visiting Branson to share his insights and experience.

http://combined-knowledge.com

http://www.twitter.com/stevesmithck

 

Please join me in welcoming Chris and Steve to the event. We hope to see you there!

Call for Sponsors is Open!

Download and sign the sponsorship form to secure your spot today!

The SharePointalooza call for sponsors is open. This is your chance to reach into a new geographic region that before you possibly had no visibility or penetration. With major employers all around from Wal-Mart, Fed-Ex, Bass Pro Shops, Jack Henry & Associates, JB Hunt, to many many others, there is opportunity abound at this one of a kind event.

Tired of the same old conferences and same old sponsorships? SharePointalooza has opportunities to make you heard like never before. We offer 2 “Rock Star” level sponsorships. These special sponsorships provide a full 60 minute session for the vendor at the end of the day. This special session is the ONLY session available at the conference at that time slot and attendees must attend this session to receive wrist bands for the concerts as well as any drink tickets or giveaways. So, bring your ‘A’ game and present a session that the attendees will remember!

Ask us about sponsoring a band and get your name on a banner! Or maybe you’d rather sponsor the speaker social and mingle with the real rock stars? With several sponsorship options, we’ve got something to fit your budget and maximize your ROI! Contact us today for more information about these custom sponsorship packages

Booth selection at SharePoitnalooza is determined by the order in which sponsorships are paid. So, pay early to get the best booth selection possible!