{"id":1822,"date":"2018-11-01T12:30:11","date_gmt":"2018-11-01T16:30:11","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1822"},"modified":"2018-11-01T12:30:11","modified_gmt":"2018-11-01T16:30:11","slug":"how-to-create-custom-responsive-sharepoint-list-views-with-view-formatters","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-create-custom-responsive-sharepoint-list-views-with-view-formatters\/","title":{"rendered":"HOW TO: Create custom responsive SharePoint list views with View Formatters"},"content":{"rendered":"

Did you see the blog post on the Microsoft SharePoint Blog about the new SharePoint list View Formatter samples<\/a>?\u00a0 We had fun building the samples in the weeks leading up to the Microsoft Ignite conference and I’d like to share what we learned.<\/p>\n

In this article I’m going to dive into the sample code and show you how to implement responsive layouts with SharePoint View Formatters.<\/p>\n

In this article, I’ll use the Resource Catalog sample<\/a> as an example.\u00a0 The Resource Catalog sample looks like this in a desktop web browser.\u00a0 You can see it fills the screen from left to right.<\/p>\n

\"\"<\/p>\n

In a tablet device it looks like this.\u00a0 The same layout is implemented and the content fits in the more narrow view port.<\/p>\n

\"\"<\/p>\n

In mobile devices it looks like this.\u00a0 Here the layout changes and the content is displayed in a stacked layout.<\/p>\n

\"\"<\/p>\n

Finally, what about when you add a web part to a SharePoint page to display the list?\u00a0 Here’s an example of what that looks like in a Modern Site.\u00a0 Notice the content fits nicely into the web part.\u00a0 In this example, the layout is the same as the tablet device example.<\/p>\n

Note:<\/strong>It’s imperative<\/em> that you think about the web part use case when making View Formatters<\/em>.\u00a0 You never know when someone will add a web part to a page to display the lists you apply View Formatters to.<\/p>\n

\"\"<\/p>\n

To implement the responsive design, use CSS and HTML in the View Formatter JSON.\u00a0 This is the same pattern used to create responsive web sites.<\/strong><\/em><\/p>\n

Looking closer at the code, you can see the top level HTML element used to define the outer container for each row (the DIV shown in the JSON View Formatter code in the green box shown below)\u00a0uses a variety of CSS styles (shown the the gold box) to implement the responsive design.<\/p>\n

\"\"<\/p>\n

Now, let’s connect the dots…\u00a0 In the image below you can see how the HTML and CSS Styles actually appear when they are rendered in the web page.\u00a0 Notice the green markup on the image that shows the HTML element (the DIV) in the code and in the web browser.\u00a0 Also, notice the gold markup on the image that shows the CSS classes that are applied to the DIV.<\/p>\n

\"\"<\/p>\n

Now, taking it to the next level, you can see the children<\/strong> element in the View Formatter JSON (green box in image below).\u00a0 It also defines a DIV.\u00a0 This DIV is used to display the content for the top portion of each row.\u00a0 You will also see another children collection and additional elements below it.\u00a0 This screenshot is only a partial view of all the HTML elements in the sample, there are many children elements used to implement the user interface.\u00a0 Again, CSS styles (in the gold box) are used to implement the responsive behavior.<\/p>\n

\"\"<\/p>\n

Just like I demonstrated earlier, here you can see what it looks like in the web browser and how the styles correlate to the HTML and CSS used to render the view.<\/p>\n

\"\"<\/p>\n

To sum it all up, to create responsive SharePoint View Formatters simply use HTML and CSS just like you would to create a responsive web site.<\/p>\n

Expert Tip:\u00a0<\/strong>Use Office UI Fabric Styles<\/a> to style the content whenever possible.\u00a0 This helps you match your user interface to Office 365.\u00a0 You will see in the samples where we used the Office UI Fabric Styles wherever we could. For example, we set the background color for the top level DIV with an Office UI Fabric Style, like this.<\/p>\n

\"\"<\/p>\n

Keep in mind, depending on your design, you may have to use styles that are not part of the Office UI Fabric Styles, just like you see in this sample.<\/p>\n

Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

Did you see the blog post on the Microsoft SharePoint Blog about the new SharePoint list View Formatter samples?\u00a0 We had fun building the samples in [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[96,104,97],"tags":[6,54,45,7],"class_list":["post-1822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-office-365","category-sharepoint","tag-how-to-sharepoint","tag-mobile","tag-o365","tag-sharepoint"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1822"}],"version-history":[{"count":8,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1822\/revisions"}],"predecessor-version":[{"id":1843,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1822\/revisions\/1843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1839"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}