Office 365 Column Formatting (with Column Formatter)

Slides:

Advertisements

Similar presentations

Source: ojects/tabber/ ojects/tabber/

Advertisements

Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements.

CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.

Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.

HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links

Customizing the SharePoint 2013 UI with JavaScript.

16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.

 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

Visual Basic Prototyping Visual Basic uses both a Visual Editor and is Code Based. With several simple lines of code, Visual Basic will navigate between.

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Introduction technology XSL. 04/11/2005 Script of the presentation Introduction the XSL The XSL standard Tools for edition of codes XSL Necessary resources.

Microsoft SharePoint Server 2010 for the Microsoft ASP.NET Developer Yaroslav Pentsarskyy

Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.

Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober

The Language of the Internet. HTML5 Hypertext Markup Language- Fifth iteration Used to create documents containing text, images, and hyperlinks Has Grammar.

Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.

HTML – Organizing Page Content. HTML Images img tag Required attribute: src

HTML – Organizing Page Content. HTML Images img tag Required attribute: src

User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1.

CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.

Looking at various Rich Message options in KRAD Kuali University: Apply Now Lab : Rich Messages Lab Objectives Understand what Rich Messages are and how.

UNDERSTANDING YOUR OPTIONS FOR CLIENT-SIDE DEVELOPMENT IN OFFICE 365 Mark Rackley

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.

Software services delivering SharePoint, Mobile, and Business Intelligence solutions Understanding and implementing the remote provision pattern in SharePoint.

Wes Preston DEV 202. Audience: Info Workers, Dev A deeper dive into use-cases where client-side rendering (CSR) and SharePoint’s JS Link property can.

DYNAMIC FAQ AND DOCUMENTATION PAGES IN SHAREPOINT A modern, reusable, and easy-to-use model.

DEV103 – Web Part Transformers – More than meets the eye By: D’arce Hess.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

OCR Computing OGAT Web Technologies. What OCR need you to know… You are expected to have a working knowledge of the above web languages.

The New Design Manager! Louis-Philippe Lavoie SharePoint Specialist / What does it mean for you? November.

Making the Most of Search in SharePoint 2013 Christina Wheeler.

HTML5 and CSS3 Illustrated Unit E: Inserting and Working with Links.

HTML Basics Text, Images, Tables, Forms. HTML Structure HTML is comprised of “elements” and “tags” – Begins with and ends with Elements (tags) are nested.

HTML for JavaScript Web Applications

Working with Cascading Style Sheets

HTML & CSS Jan Janoušek.

Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.

Web Systems & Technologies

Web Basics: HTML/CSS/JavaScript What are they?

CSS Layouts: Positioning and Navbars

Understanding SharePoint Framework Extensions

What's new in the world of SharePoint development and deployment

>> CSS Rules Selection

ASP.NET Web Controls.

© 2016, Mike Murach & Associates, Inc.

Cascading Style Sheets contd: Embedded Styles

Creating Custom Conversion Themes

Lists, Thumbnails, and Icons

Intro to CSS CS 1150 Fall 2016.

Modern UI Extensions with the SharePoint Framework

SharePoint Practice Lead

HTML – Organizing Page Content

Custom Wiki Pages SharePoint 2010 September 18, 2018.

AngularJS and SharePoint 2013: Lessons Learned from the Trenches

Intro to CSS CS 1150 Spring 2017.

The Web Wizard’s Guide To DHTML and CSS

AngularJS and SharePoint Chris Douglas Senior SharePoint Developer InfoReliance Web: Twitter:

DHTML Javascript Internet Technology.

Web Programming A different world! Three main languages/tools No Java

Inserting and Working with Links

Customizing Editable Regions and Building Templates

DHTML Javascript Internet Technology.

Tepp Räisänen Liike/OAMK 2011

Creating Lightning Fast Apps Using AngularJS

AngularJS and SharePoint I Chris Douglas Senior SharePoint Developer ECS Web:

The SharePoint framework

Unit 4 Test CSS Test.

Creating Lightning Fast Apps Using AngularJS

Presentation transcript:

Office 365 Column Formatting (with Column Formatter) Chris Kent Office 365 Practice Lead

“Me” Indianapolis, IN @theChrisKent theChrisKent.com Office Development Office 365 Practice Lead @theChrisKent Can I possibly get my name on a single slide even more? Wow. “Me” theChrisKent.com

O365 Column Formatting Declarative modern listview customization

The Modern Listview No XSLT Responsive No Calculated Column Trickery Fancy Boring

Dapper The Modern Listview

JSON Format (Totally NOT custom code) Elements – elmType div, span, a, img, svg, path, button Content - txtContent Attributes - attributes class, href, src, rel, target, title, role, d, aria, iconName Style - style Children – children Operators & Operands basic math, comparison, conversion, logical

OOTB Column Formatting Demo OOTB Column Formatting

Column Formatting vs Field Customizer Customization Column Formatting Field Customizer Conditional Formatting based on item values Supported

Column Formatting vs Field Customizer Customization Column Formatting Field Customizer Conditional Formatting based on item values Supported Action Links Static links (no script) Any type of link

Column Formatting vs Field Customizer Customization Column Formatting Field Customizer Conditional Formatting based on item values Supported Action Links Static links (no script) Any type of link Visualizations Simple Visualizations (HTML & Styles) Whatever!

Column Formatting vs Field Customizer Customization Column Formatting Field Customizer Conditional Formatting based on item values Supported Action Links Static links (no script) Any type of link Visualizations Simple Visualizations (HTML & Styles) Whatever! Page Context @now, @me Full context!

Column Formatting vs Field Customizer Customization Column Formatting Field Customizer Conditional Formatting based on item values Supported Action Links Static links (no script) Any type of link Visualizations Simple Visualizations (HTML & Styles) Whatever! Page Context @now, @me Full context! JS Libraries Nope Go for it! Custom CSS Classes Nope, limited subset & inline styles Interactivity Nope (not even hover)

Column Formatting vs Field Customizer Customization Column Formatting Field Customizer Conditional Formatting based on item values Supported Action Links Static links (no script) Any type of link Visualizations Simple Visualizations (HTML & Styles) Whatever! Page Context @now, @me Full context! JS Libraries Nope Go for it! Custom CSS Classes Nope, limited subset & inline styles Interactivity Nope (not even hover) Developer Required “No” Yes Solution Deployment Not needed Required Use Column Formatting whenever possible, but know it’s limits

SharePoint Patterns & Practices Learn. Reuse. Share.

Column Formatter Easy editor for modern listview Column Formatting github.com/SharePoint/SP-Dev-Solutions/tree/master/Solutions/ColumnFormatter