Introduction To Ui Personalization with Kentico CMS 5


Published on

Learn the fundamentals of UI Personalization within Kentico CMS 5.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • In late December Kentico released version 5 As you can see it has tons of new features and updates across the entire system This is the first of several webinars focused on providing detailed technical information on version 5. Our focus today is one of my favorites and a new feature called UI personalization. UI personalization is a feature that impacts many different areas across Kentico CMS 5 Fundamentally UI personalization is designed to increase the productivity of business users by enabling system administrators to provided a simplified and customized user interface within CMS DESK. Typical scenarios would allow system administrators to reduce the amount of tabs, menu items and different parts of a page that a user would see within the Kentico UI. Allowing the end user to focus on the tasks they need to get their jobs done. Let’s start by taking at look at some of the fundamentals for UI personalization
  • Implementing UI Personalization in Kentico CMS 5 required additional re-factoring of how the application is structuredThe term modules is nothing new but an important term to keep in mind when talking about UI personalizationBy definition modules contain UI elementsThese elements consist of tabs, menu items and groups of controls and are what is hidden from the usersThe screen shot you can see here represents an example of a customized CMS DESK – Tools Tab. As you can see the module CMS DESK has UI personalization applied that hides various menu items or UI elements from this user. Whether a UI Element is shown or hidden is based on role security
  • At runtime a composite is created of all the roles a user belongs to called a UI profileIf at least one role the user belongs to makes the element visible it is displayed. As an example using the picture we can we see how this worksThe user is a member of Role 1 and Role 2For role 1 they have access to UI element 1 and 2 in module 1For role 2 they have access to UI element 1 in module 2At runtime their UI profile provides an interface that will display in Module 1 – UI Element 1 and 2Module 2 – UI element 1The benefit and why this is so important to this architecture is that UI profiles are site related. This means that a user is able to see a personalized UI when editing one site and a completely different UI when editing another siteThis is because a users UI profile is dependent on roles and roles are site related. Users can be a member of any number of roles across all sites in the system. Let’s take a look at an example of UI personalization using the corporate sample site.
  • Included in the sample corporate site is a sample user Andrew Jones with the username andyAndy is a special user and contains very restricted UI permissions so that he can focus on a couple of key areasLet’s take a lookLogin in to CMS DESK as administrator and show full interfaceShow andy’s roleAdministrator ->Users ->Andy -> RolesLogin as andyShow missing Administration tabShow restricted WYSIWYG editorRestricted My DeskRestricted ToolsSelect content and Home Page and go into properties and show limited number of options available.Lets look at how UI personalization is enabled
  • Before we get into the particulars of setting up UI personalization. It’s important to ensure that you have it enabled using Site Manager – settings – security Within this screen you have two thingsFirst you can enable UI personalization globally or per siteAlso, ensure that you have Enable UI Personalization setLet’s take a look at how UI personalization works in more detail
  • As we said earlier UI Personalization is applied to the CMS DESK. Site Manager doesn’t provide any personalization at this time as it is typically used by administrators and developers who need the full UIWithin CMS DESK personalization is available for UI elements that I have listed. There are a ton of possible combinations available from these for exampleThe four main tabs in CMS desk can be hiddenThe content tab probably offers the most possibilitiesHiding any of the main tabs in edit modeOn the design tab you customize pretty much all of the editing actionsWithin web part properties dialog you can hide their tabsFor the properties tab you can control the visibility of most of the UI elements including parts of General, URLs, Template, Metadata, menu and security pagesFor the My DESK tab you can hide the menus and all tabs on the my Profile pageFor the tools and Administration tab you can hide all the menu itemsOne of my favorites is that all the action buttons on the WYSIWYG Editor can be hiddenThe Media Dialog displayed when using the insert image or insert link in the WYSIWYG editor and Editable image web part allows the hiding of the dialog tabsAs you can see there are some incredible possibilities especially when you add in that you can add your own elements. Given our limited time today there is lots of additional information and examples available in the documentation.Let’s take a look at how we can make these things happen
  • Fundamentally there are two key menu items that are used when working with UI personalizationThe Modules screen is used to define the available UI elementsThe UI Personalization screen is used to set the permissions on those elementsLet’s take a quick look at these screens using the sample corporate site
  • Site Manager – Development – ModulesDemo 1 - For each - Show user interface (can add new element, can reorder, select item and check roles)Drill into Content (PG 1)Drill into WYSIWYG editor (Pg 2)Demo 2Andy who we looked at earlier was a CMS basic user if you remember he was missing the Administration tab in CMS DeskSelect CMS DESK – roles and show how not selected for CMS BASIC UsersSite Manager – Administration – UI PersonalizationContinuing to look at the CMS BASIC users let’s look at what they have availableSelect CMS Basic User role and cycle threw modulesLets look at how we can add our own custom elements
  • As we saw a couple of minutes ago we add custom elements UI elements using Site Manager -> Development ->Modules screen. Within this screen we then select the new UI element option and complete the following information •Display name: name of the element displayed in the administration interface thiscan be entered either as plain text or as a localizable string in the {$mystringname$} format•Code name: unique module name of the element used by web site development•Element is custom: When not selectedthe element is considered a native part of the Kentico CMS. Make sure to set this value for your custom UI elements•Caption: caption of the UI element displayed in the rendered UI this can be entered either as plain text or as a localizable string in the {$mystringname$} format•Target URL: URL of the page which is the content of the UI element. This can be an absolute (ex. orrelative (e.g. ~/CMSModules/Content/CMSDesk/Default.aspx) URLs•Icon path: This is only for menu items and sets the icon displayed next to element caption. You can enter eithera full relative path beginning with ~ for example ~/App_Themes/Default/Images/CMSModules/list.pngor a short path starting under the images folder (ex.CMSModules/list.png)Let’s go ahead and add some new UI Elements
  • Introduction To Ui Personalization with Kentico CMS 5

    1. 1. Introduction to UI Personalization<br />Module 18<br />Thomas Robbins<br /><br /><br />Kentico_CMS<br />trobbins<br />
    2. 2. Session Agenda<br /> UI Personalization Fundamentals<br /> System Management Options<br /> Creating Custom UI Elements<br /> Questions<br />
    3. 3. UI Personalization Fundamentals<br />
    4. 4. Welcome to Kentico CMS 5.0<br /><ul><li>E-commerce (on-line store)
    5. 5. E-mail queue
    6. 6. Event Calendar
    7. 7. Event Log
    8. 8. Export/import web sites or selected
    9. 9. Flexible content hierarchy
    10. 10. Flexible navigation
    11. 11. Forms authentication
    12. 12. Forums
    13. 13. Friendly (smart) URLs
    14. 14. Friends
    15. 15. Full source code
    16. 16. Full-text search
    17. 17. Fully customizable
    18. 18. Geo mapping (Google Maps)
    19. 19. Google sitemap
    20. 20. Groups
    21. 21. IE 6.0, IE 7.0 FireFox 1.0.5+, Mozilla 7.1+, Netscape 7.1+, Opera 7.52+ support
    22. 22. Image gallery
    23. 23. Incremental deployment of site changes
    24. 24. installation and database
    25. 25. Integration with custom user and role database, external authentication
    26. 26. Linked documents
    27. 27. Management and publishing of
    28. 28. Media library
    29. 29. Memory management
    30. 30. Message boards
    31. 31. Messaging
    32. 32. Multiple languages
    33. 33. Multiple sites using single code
    34. 34. Newsletters
    35. 35. Notifications
    36. 36. On-line forms (BizForms)
    37. 37. On-line users
    38. 38. PayPal support
    39. 39. Personalized content
    40. 40. Personalized editor
    41. 41. Polls
    42. 42. Portal engine
    43. 43. Preview before publish
    44. 44. Recycle Bin
    45. 45. Report Abuse
    46. 46. Reporting
    47. 47. Re-use content on several pages
    48. 48. Roles and Users
    49. 49. RSS feeds
    50. 50. SEO
    51. 51. Scheduled Tasks
    52. 52. Spell-checker
    53. 53. Starter Sites
    54. 54. Taxonomy - Categories, Tagging
    55. 55. Time-zones support
    56. 56. UI Personalization
    57. 57. URL aliases
    58. 58. User contributions
    59. 59. User management
    60. 60. User registration and secured pages
    61. 61. Web analytics
    62. 62. Web farm support
    63. 63. Widgets
    64. 64. Windows authentication
    65. 65. Windows Live ID authentication
    66. 66. Workflow
    67. 67. WYSIWYG, browser-based editing
    68. 68. XHTML, CSS layouts, W3C WAI
    69. 69. Youtube integration
    70. 70. 200 built-in web parts
    71. 71. Active Directory integration
    72. 72. AJAX support
    73. 73. Approving documents
    74. 74. Authorize.NET
    75. 75. Avatars
    76. 76. Bad words
    77. 77. Badges
    78. 78. Banned IP addresses
    79. 79. Blogs
    80. 80. Booking System
    81. 81. Branding
    82. 82. Complete documentation of the CMS
    83. 83. Content and object staging
    84. 84. Content locking (check-in/check-out)
    85. 85. Content Rating
    86. 86. Content/design separation
    87. 87. Controls caching
    88. 88. Custom document types
    89. 89. Custom document types with
    90. 90. Custom event handlers
    91. 91. Custom fields
    92. 92. Custom tables
    93. 93. Custom web parts in C# and VB.NET
    94. 94. Customizable Menu
    95. 95. Customizable page templates
    96. 96. Customizable permissions
    97. 97. Customizable settings
    98. 98. Deployment on shared hosting
    99. 99. Document-level permissions
    100. 100. Drag-drop development
    101. 101. Dynamic site map
    102. 102. Easy deployment</li></li></ul><li>UI Personalization Fundamentals<br />Kentico CMS 5 user interface consists of Modules<br />Modules contain UI Elements<br />Page or part of page in CMS Desk that can be hidden from a users<br />Tab<br />Menu Item<br />Groups of Controls<br />CMS Desk Only!<br />
    103. 103. Runtime Management<br /><ul><li> UI profile defines visibility of a UI Element for a particular role
    104. 104. User profile defined by UI profiles of their roles
    105. 105. UI element visible if at least one role the user is a member makes element visible</li></li></ul><li>Demo – UI Personalization in Action<br />Let’s Meet Andy<br />
    106. 106. Enabling UI Personalization<br />Site Manager -&gt; Settings -&gt; Security -&gt; Enable UI Personalization<br />
    107. 107. System management Options<br />
    108. 108. What Can I Customize?<br />
    109. 109. How do I do it?<br />Site Manager -&gt;Development -&gt; Modules<br />Define which UI Elements are available<br />Site Manager -&gt;Administration -&gt; UI Personalization<br />Set Permissions for Roles<br />
    110. 110. Demo<br />Content/Tools/WYSIWYG Editor<br />
    111. 111. Creating Custom UI Elements<br />
    112. 112. Adding New UI Elements<br />
    113. 113. Demo<br />Adding a New Tab to the CMS Desk<br />
    114. 114. Upcoming Activities<br />Feb 9 10–11 AM PST Kentico Webinar<br />CMS Today – Generate Buzz, Leads and Sales from your Website using a CMS<br />Feb 18 10–11 AM PST Kentico Webinar<br />Technical Learning – Version 5.0 ‘New Features’<br />Feb 25 10–11 AM PST Kentico Webinar<br />CMS Today – Knowing When You Need a CMS<br />March 9 10–11 AM PST Kentico Webinar<br />CMS Today – Driving Success with Search Engine Optimizations (SEO)<br />March 16 10–11 AM PST Kentico Webinar<br />Technical Learning – Introduction to Widgets<br />April 12–14 Dev Connections - Las Vegas<br />MS Visual Studio Launch<br />April 27 Internet World 2010 - UK<br />Don’t forget the Kentico Developer Newsletter!<br />
    115. 115. Questions<br />Thomas Robbins<br /><br /><br />Kentico_CMS<br />trobbins<br />