Custom User Interface creation in SP2013/O365 · Accessible content is available upon request....

24
Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

Transcript of Custom User Interface creation in SP2013/O365 · Accessible content is available upon request....

Page 1: Custom User Interface creation in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

Accessible content is available upon request.

Custom User Interface creation in SP2013/O365By: D’arce Hess

Page 2: Custom User Interface creation in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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

[email protected]

D’arce Hess

Page 3: Custom User Interface creation in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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

Content Types &

Site Columns Alternate CSS

Page Layouts Questions

Agenda

Page 4: Custom User Interface creation in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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.

WHAT DO YOU NEED?

@darcehess

Page 6: Custom User Interface creation in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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

NameSingle Line

of TextRich Text

FieldImage Date

@darcehess

Page 8: Custom User Interface creation in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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 in SP2013/O365 · Accessible content is available upon request. Custom User Interface creation in SP2013/O365 By: D’arce Hess

© 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.