![Page 1: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/1.jpg)
Accessible content is available upon request.
Custom User Interface creation in SP2013/O365By: D’arce Hess
![Page 2: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/2.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
@darcehess
https://www.linkedin.com/in/darcehess
D’arce HessStrategic Consultant
![Page 3: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/3.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
IntroductionContent Types &Site Columns Alternate CSS
Page Layouts Questions
Agenda
![Page 4: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/4.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
INTRODUCTION
![Page 5: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/5.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Content Type Site Columns Page Layout Alternative CSS
WHAT DO YOU NEED?
@darcehess
![Page 6: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/6.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
CONTENT TYPES & SITE COLUMNS
![Page 7: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/7.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
THINK ABOUT AN EXCEL SHEET WITH COLUMNS
Name
Single Line of
Text
Rich Text Field
Image
Date
@darcehess
![Page 8: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/8.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Creation of a Site Column
@darcehess
![Page 9: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/9.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Site Settings
Site Columns Create
@darcehess
![Page 10: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/10.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Choose your column type.
Consider what kind of content you want the user to input.
![Page 11: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/11.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
You now have your site columns in a group name of your choosing
@darcehess
![Page 12: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/12.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Creation of a Content TypeHOW TO CREATE A CONTENT TYPE
Back to Site Settings and choose “Site Content Types”
![Page 13: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/13.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Choose “Create”
@darcehess
![Page 14: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/14.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Create your new Content Type
@darcehess
![Page 15: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/15.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
PAGE LAYOUTS
![Page 16: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/16.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
CREATE YOUR PAGE LAYOUT
When creating the new page layout, choose the Content Type and Site Column group associated for this page.
@darcehess
![Page 17: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/17.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
ENTER SHAREPPOINT DESIGNER
![Page 18: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/18.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
ALTERNATE CSS
![Page 19: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/19.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Controls the Look & Feel of your Layout
*If you need it to theme, be sure to place in the “Themable” Folder in the Style Library
@darcehess
![Page 20: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/20.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.@darcehess
![Page 21: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/21.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Expand the Alternate CSS URL. Remember to use a relative URL
![Page 22: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/22.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
REFERENCES
![Page 23: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/23.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.
Introduction to Content Types:https://msdn.microsoft.com/en-us/library/office/ms472236(v=office.14).aspx
Blog by Benjamin Nialuinhttp://en.share-gate.com/blog/sharepoint-columns-site-columns-or-content-types
Chris Bortlik’s Bloghttp://blogs.technet.com/b/cbortlik/archive/2012/05/23/the-hidden-power-of-sharepoint-content-types.aspx
![Page 24: Custom User Interface Creation with Content Types in Sharepoint 2013/O365](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecefce1a28ab2b378b4593/html5/thumbnails/24.jpg)
©AvePoint, Inc. All rights reserved. Confidential and proprietary information of AvePoint, Inc. No part of this may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written consent of
AvePoint, Inc.