Information Architecture in the Helix Era. maandag 23 januari 2017

Size: px

Start display at page:

Download "Information Architecture in the Helix Era. maandag 23 januari 2017"

Godfrey Gibbs
5 years ago
Views:

1 Information Architecture in the Helix Era maandag 23 januari 2017

About Me Erwin Rijss Technology Consultant @Macaw since 2015 Before Consultant,

2 About Me Erwin Rijss Technology since 2015 Before Consultant, Trainer, Evangalist, Product Owner, Technical

3 About Macaw ~ 250 people Schiphol-Rijk Focus on Microsoft & Sitecore Full-service Operations, Interactive, Analytics, Integration, Strategy

4 Goals What are gonna do?

5 Goals The Helix Architecture Principles and the Habitat example implementation was food for thought We analyzed the Habitat implementation and looked how it mapped to the ideas we have We recognized that a good Information Architecture is key for a re-usable framework based on Helix principles We adapt all the good things and mix them with our ideas We like to share these ideas with you today

6 Helix architecture Quick review of the responsibillities

7 Foundation, Feature & Project

8 Template types Interface template Defines an interface for solution logic to work against, for example by defining the fields that are used by a module s logic or by simply being a template in the template inheritance hierarchy of an item. Can also be referred to as a base template. Page type template Makes up the pages of the website. Derives from interface templates and has a presentation layout. Datasource template Items from this template are referenced by renderings as a datasource. Derives from interface templates but has no associated layout. Settings template Used for lookup items for fields or to hold fields to configure the business logic in modules. Folder templates These templates are used for the folder items that make up the scaffolding of the content structure.

9 Template types Template Type Can have a page layout? Exists is which layers Interface template No Feature or Foundation Page type template Yes Project Datasource template No Project Settings template No Feature or Foundation Folder templates No All

10 Anatomy of a project What do we mark as the root items of our project

11 Configuration and Settings Helix says "We differentiate Configuration from Settings in that Settings are aimed at the user roles (editor, administrator) and Configuration is aimed at the developer or IT system administrator roles." We need a structured setup for settings that apply to a certain scope We will attach that to the site structure

13 Project Structure <Project/tenants> - Contains project settings <Central Repository> - container for shared content between sites (both page and datasource) <Metadata Repository> - container for supporting content, e.g. lookuplists, dictionaries, project-wide settings <Site> - Contain site settings <Home> - Root item for the site <Local Repository> - container for local datasource items

14 Project/Tenant A Project has one or multiple sites A Project can have project repositories Page templates are scoped on a project All sites have the same contenttypes Datasource templates are scoped on a project Layouts are scoped on a project Renderings are scoped on a project Sites use the same HTML output for renderings, can differ by theme

15 Settings Module (Foundation) ISettings Basetemplate: Standard Template _SettingsProject Basetemplates: Standard Template, ISettings _SettingsRepository Basetemplates: Standard Template, ISettings _SettingsSite Basetemplates: Standard Template, ISettings

17 Feature and project settings Feature and project settings are custom datatemplate that inherit from ISettings _SettingsSiteCookieMessage _SettingsSiteLocalDatasourceLocations _SettingsProjectCountryNavigationRoot

18 What is different with Helix "Interface templates are prefixed with an underscore (_) to signify that they are interface templates and cannot be instantiated as items." We create one more level of abstraction The Feature/Module interface template is prefixed with an "I" and is empty All fields (other interface templates) that can apply within the feature/module are prefixed with a underscore (_) We use a naming convention

19 Naming Convention All templates inherit from Standard Template Feature has Empty Interface Template: IFeaturename All Feature Functions / Feature Data Fields start with underscore _FeaturenameFieldname or _FeaturenameFunction Why do we do this? To check if a feature applies we can validate the "interface template": IFeaturename To check which functions/fields apply we can look for the implemented/inherited: _FeaturenameFieldnames

20 Pages, Assets, Content, Media

21 Pages vs Assets Pages Has layout, an url, Appears in search results, Experience editor Assets (Datasources) No layout, no url, never appears in search results, used as datasource for renderings IPage IAsset

22 Content Feature Every page has a title, and can have an abstract and an image Assets can have title and image Title appears above the page Abstract can be used in Lists, SEO, Open Graph, Navigation, etc. Image can be used in Lists, Open Graph, Navigation, etc. Or as fall-back for more specific implementations (later more)

23 IContent _ContentTitle (Template) Main Properties (Template Section) ContentTitle (Template Field) _ContentAbstract _ContentImage Main Properties (Template Section) ContentImage (Template Field) Source => Media Library Root

24 Media Library Convention The introduction of the Image field with one possible value for Source challenges you directly to think about Media Library structure in multi-project, multi-site scenario Because source is set on feature/foundation level, it can not be overruled at project or site level Therefor: Structure of Media Libary as shown Access in Item Selectors (DropTree, TreeListEx, Image, etc.) is restricted based on security Media Libary Documents Project Acronym 1 Project Acronym n Images Project Acronym 1 Project Acronym n Videos Project Acronym 1 Project Acronym n

25 Images in a multi-tenant / multi-site environment Same image can be used on various places in presentation Aspect ratio and width and/or height are (often) defined from interaction design Extend image request with Aspect ratio width, Aspect ratio height and desired width (or height) of the image Image.png?arw=4&arh=3&w=200 Find out if Image has cropping values for requested aspect ratio. If not, center crop the image for the given aspect ratio Resize the image to the desired width

26 Add cropping parameters for multiple ratios

27 By selecting an area from the image

28 First Page Type template

29 First Page Type template

30 Feature Navigation Menu and Simple Link Lists that bring me somewhere

32 INavigation _NavigationTitle (Template) Navigation Properties (Template Section) NavigationTitle (Template Field) _NavigationLink _NavigationBehaviour _NavigationIcon _NavigationImage

33 Project implementation Country Navigation Country Navigation Folder IAsset, _NavigationTitle, _NavigationBehaviour Country Navigation Item IAsset, _NavigationTitle, _NavigationBehaviour, _NavigationLink

34 INavigationComponent _NavigationComponentTitle (Template) Navigation Component Properties (Template Section) NavigationComponentTitle (Template Field) _NavigationComponentRootFolder _NavigationComponentDepth _NavigationComponentIncludeRoot

35 Project implementation As Datasource IAsset, _NavigationComponentTitle, _NavigationComponentRootFolder, _NavigationComponentDepth, _NavigationComponentIncludeRoot

36 Project implementation As Site Settings _SettingSiteCountryNavigation Site Settings Navigation - Country Navigation CountryNavigationTitle CountryNavigationRootFolder

37 Code implementation Project Controller Rendering for collecting parameters (Title, Root, etc.), especially for the Settings variant Feature Get items based on parameters and additional business logic (more on that later) Create output (Optional: default output)

38 Is this according to Helix No, Helix, as in the example implementation Habitat, creates mark-up in the feature layer We think that HTML belongs to the project layer, except for some default presentation Same mark-up is re-usable for all sites within a project Theming can be used for alternative styling A different project has different mark-up, but if default is enough, this is no additional work

39 Project Implementation Main Navigation Extend Page Type templates with _NavigationTitle _NavigationBehaviour Main Navigation Rendering "knows" that: It should start at the Home Item That the Root Item should be included That the depth is 2, 3, 4,,?

40 Navigation Feature Business logic If IPage and NavigationTitle is Empty, use ContentTitle If IPage and NavigationImage is Empty, use ContentImage If IPage then NavigationLink is url of the page

41 Sortorder of Template Sections Ordering the sections in page templates

42 Ow crap!

43 A solution Create a "User Interaction Design" Use SortOrder on TemplateSection Items to add appropriate numbers Keep fingers crossed But. Main Properties e.g. Title, Abstract Image Contenttype specific sections Main Content sections Related Content sections Common Sections, e.g. Seo, Open Graph, Navigation, etc

44 There is a pipeline for that getcontenteditorfields Pipeline This pipeline retrieves the fields for the Content Editor and does a lot of sorting based on Sitecores own rules At the end of the pipeline a new processor is inserted, which Checks if the ISortSectionsOnBaseTemplateOrder template is inherited Gets the order of the base templates of the current template Collects the reverse order of the sections of the basetemplates Let the sections bubble up

45 Section order without ISortSectionsOnBaseTemplateOrder

46 Add ISortSectionsOnBaseTemplateOrder

47 Desired Order of Sections

48 Granularity of Features

49 How small or big is a feature Habitat feature News has: Templates with News Title, News Summary, News Date, News Image and News Body Renderings for News Lists and News Teasers Assume a new feature Event, which according to this structure, has: Templates with Event Title, Event Summary, Event Dates, etc. Renderings for Event Lists and Event Teasers Which means that: Creating a combined list of News and Events is only possible through Search Logic for Teasers is maybe written twice Start- and enddates (Schedule) can be re-used in any other Page or Asset that needs a start- and enddate, like a Training or Course Etc.

50 More granularity Event has a Schedule properties (start- and enddate) Content (including news) has Publication properties (publication data, author) Offices and Departments have Address properties (location- and mailaddress) Offices, Departments, Persons have Contact properties (phone, fax, , websites, social links) Etc. All these properties are used to assemble the Page templates and Asset (datasource) templates

51 Address and Contact Feature

52 Project Implementation Office Asset

53 Project Implemenation Office Asset

54 Project Implementation Experience Editor

55 Project implementation Use of Custom Experience Buttons

56 Feature implementation Custom Experience Buttons

57 Metadata Lists (not yet implemented) How to deal with metadata in multi-tenant environment

58 Addres as Lookup Name Value List (Custom)

59 Source and lookupitems

60 What if? In a new project, completely targetted on The Netherlands, the list should contain: Street Housenumber Housenumber addition Postcode City Remember: for item selectors (DropTree, Treelist, Image, etc.) we use Security and Access Rights Source is set on feature level. Can this be overriden on project level?

61 Yes (we think) Use the getlookupsourceitems pipeline Analogy with the Local Datasources from Habitat

62 getlookupsourceitems Pipeline works for: Droplink Droplist Grouped Droplink Grouped Droplist Multilist Checkbox List Name Lookup Value List Lookup Name Value List (custom control)

63 Summary

64 So.. We adapt most of the Helix architecture and use the best from Habitat We use a more granular approach of our feature definitions We like to delegate presentation to the Project layer We are always evaluating and improving Thanks!

65 Beechavenue 140 / 1119PR Schiphol-Rijk / / info@macaw.nl /

Data Definition Reference

Sitecore CMS 6.4-6.5 Data Definition Reference Rev. 2012-10-19 Sitecore CMS 6.4 6.5 Data Definition Reference A Conceptual Overview for CMS Administrators, Architects, and Developers Table of Contents