Join Stefano Tempesta, Digital Strategist [Blockchain, Machine Learning, Big Data] | Microsoft RD & MVP based in Zürich, Switzerland as he explains How To Create Classic SharePoint Add-ins with Office UI Fabric.

Video Transcript:

hello my name is Stefano Tempesta I’m a Microsoft Regional Director and MVP based in Switzerland in this how-to video for the European SharePoint office 365 and Azure community we are going to see how we can use office UI fabric for dressing a beautiful add in the classic SharePoint as you may know office UI fabric is the new dress for office as beings that perfectly marries with the modern SharePoint experience specifically using the SharePoint framework now besides providing a set of UI guidelines and font styles the grid layouts and icons of his wife fabrics add also a rich collection of HTML components ready to use in your SharePoint this component would go under the name of office UI fabric JS office UI fabric  is a rich collection of components that include bread crumb but on contact on menus that own all you have to do to get started really is referencing some style sheets and JavaScript files that get you access to these HTML components and then the follow the instructions follow the guidelines a component by component for adding the relevant HTML code and the necessary JavaScript for initializing the component itself in your appointed dinner as we are going to see so know the classic SharePoint at dinner we are building today is our weather forecast by city I’m using the open weather map API which is freely to a certain number of use you can query this API by city name or even by the city ID so this what we are going to do soon and once the API is invoked at a specific URL which is your rest in point the API returns adjacent message with all the necessary information about the weather conditions and a few other attributes that we want to display in the atom itself on the SharePoint site I’m in my site I have created a custom list called cities with some cities name and ID that are necessary for invoking the open weather map API as we said when launching the weather at dinner from my apps in testing then I can see that there is a drop-down list is a select component is built with office UI fabric GS and displays at city names retrieved from the custom list using the ID of the city in balking the weather API then I’m able to obtain weather conditions in the selected city ok so now time to have a look into the source code of this classic SharePoint addin first of all we have to reference the officer fabric stylesheet from the SharePoint CDN and the office UI fabric jealous stylesheet and JavaScript and this is done in the code-behind of my ID page also all the integration of data in a SharePoint is a client-side so we use a JS file about genius for making the necessary queries to SharePoint okay so now that we are in the JS file these inbox as itself as the add-in start an initialize page function which basically obtained the client context SharePoint and when they document the web page is ready I will load the data initialize the fabric UI and initialize them event handler in sequence now let’s have a look a bit better how data is loaded which is purely client-side shell point object model I obtain the CD listed by title from my client context build a camera query for retrieving all day list items see including City title & city ID and then executing this query a synchronously when the query succeeds it will return a list of cities with ID title and I can bind adding an option to the select component on the UI and on city selection I’m invoking the open weather map API by building the URI combining the city ID the weather app ID that we have to obtain in order to be able to invoke this API and then specifying the units s matrix the JSON message that I obtain back contains city name weather condition temperature and humidity that I extract from that JSON object itself and then bind to the relevant items on the added page so let’s have a look at how the adding page looks like an MS fabric Content which contains in this case a grid layout very similar to the grid layout in bootstrap and then each specific component so now we have a drop-down component which is identified by the MS – drop-down class with the options own adult built at runtime selected from the custom list in SharePoint and we have added panel on the right hand side where with this plane all the items for the weather conditions which are identified by a specific ID you also can notice that the icons are displayed using the MS – icon and a specific icon name they are all part of the office UI fabric stylesheet and that’s it really that all you need before getting started with office UI fabric in our class section point at dinner a reference of statute JavaScript file and then using the relevant CSS classes and initializing the UI component with JavaScript all the source code for this relatively simple add-in is on my GitHub repository feel free to use it and thanks for watching ciao