Creating Custom Views For Blocklist, Tutorials

<!doctype html>  <html class="no-js" lang="en">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="alternate" type="application/rss+xml" title="Latest packages" href="//our.umbraco.com/rss/projects" /> <link rel="alternate" type="application/rss+xml" title="Package updates" href="//our.umbraco.com/rss/projectsupdate" /> <link rel="alternate" type="application/rss+xml" title="Active forum topics" href="//our.umbraco.com/rss/activetopics" /> <link rel="search" type="application/opensearchdescription+xml" title="our.umbraco.com" href="/scripts/OpenSearch.xml">  <meta name="application-name" content="Our Umbraco" /> <meta name="apple-mobile-web-app-title" content="Our Umbraco">  <link rel="apple-touch-icon-precomposed" href="/assets/images/app-icons/icon-60.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/images/app-icons/icon-72.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/assets/images/app-icons/icon-76.png"> <link rel="icon" sizes="192x192" href="/assets/images/app-icons/touch-icon-192x192.png"> <meta name="msapplication-TileImage" content="/assets/images/app-icons/tile.png" /> <meta name="msapplication-config" content="/assets/images/app-icons/browserconfig.xml"> <link rel="icon" type="image/png" href="/assets/images/app-icons/favicon.png"> <meta name="robots" content="noindex"> <title> Creating Custom Views For Blocklist, Tutorials - Our Umbraco </title> <meta name="description" /> <link rel="canonical" href="https://docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist/" /> <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-W9TZ2XW');</script>  <link href="/DependencyHandler.axd?s=L2Fzc2V0cy9jc3Mvc3R5bGUubWluLmNzczs&t=Css&cdv=25022601" type="text/css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" type="text/css" rel="stylesheet"/> </head> <body class="wiki-page">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9TZ2XW" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>  <div class="quick-menu"> <div class="container"> <div class="row"> <div class="col-md-12"> <a href="/member/login">Sign in</a> <a href="/member/Signup">Register</a> </div> </div> </div> </div> <div class="wrapper"> <header> <div class="navigation"> <div class="container"> <div class="row"> <div class="col-md-3"> <a class="logo" href="/">Our Umbraco</a> </div> <div id="toggle" class="menu-toggle"> <a href="#" class="toggle cross"><span></span></a> </div> <nav class="col-md-9"> <ul> <li> <a href="/forum/">Forum</a> </li> <li> <a href="/packages/">Packages</a> </li> <li class="current"> <a href="/documentation/">Documentation</a> </li> <li> <a href="https://community.umbraco.com/">Community</a> </li> <li> <a href="https://discord.umbraco.com/">Discord</a> </li> <li> <a href="/download/">Download</a> </li> <li> <a href="/member/login?redirectUrl=%2fdocumentation%2fTutorials%2fCreating-Custom-Views-for-Blocklist%2f">Sign in</a><strong> / </strong><a href="/member/Signup">Register</a> </li> </ul> </nav> </div> </div> </div> </header> <div class="has-sidebar"> <div class="documentation"> <div class="page-content"> <div class="sidebar-area"> <div class="sidebar-content"> <div class="content-wrapper"> <nav> <details class="secondary_nav" open> <summary>Menu</summary> <ul class="level-1"> <li class=""> <a href="/documentation/Getting-Started/"><h3>Getting Started</h3></a> <ul class="level-2 "> <li class=""> <a href="/documentation/Getting-Started/Managing-an-Umbraco-project/"><h4>Managing an Umbraco project</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Getting-Started/Editing-websites-with-Umbraco/"><h4>Editing websites with Umbraco</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Getting-Started/Creating-websites-with-Umbraco/"><h4>Creating websites with Umbraco</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Getting-Started/Developing-websites-with-Umbraco/"><h4>Developing websites with Umbraco</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Getting-Started/Developing-websites-with-Umbraco/Customizing-Umbraco-sites/"><h5>Customizing Umbraco sites</h5></a></li> <li class=""><a href="/documentation/Getting-Started/Developing-websites-with-Umbraco/Extending-the-Umbraco-Backoffice/"><h5>Extending the Umbraco Backoffice</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Getting-Started/Hosting-an-Umbraco-infrastructure/"><h4>Hosting an Umbraco infrastructure</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Getting-Started/Where-can-I-get-help/"><h4>Where can I get help</h4></a> <ul class="level-3 "> </ul> </li> </ul> </li> <li class=""> <a href="/documentation/Fundamentals/"><h3>Fundamentals</h3></a> <ul class="level-2 "> <li class=""> <a href="/documentation/Fundamentals/Setup/"><h4>Setup</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Fundamentals/Setup/Requirements/"><h5>Requirements</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Setup/Install/"><h5>Install</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Setup/Upgrading/"><h5>Upgrading</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Setup/Server-Setup/"><h5>Server Setup</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Fundamentals/Backoffice/"><h4>Backoffice</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Fundamentals/Backoffice/Sections/"><h5>Sections</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Backoffice/Property-Editors/"><h5>Property Editors</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Backoffice/Login/"><h5>Login</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Backoffice/Content-Templates/"><h5>Content Templates</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Backoffice/Infinite-editing/"><h5>Infinite editing</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Backoffice/LogViewer/"><h5>LogViewer</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Backoffice/Variants/"><h5>Variants</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Fundamentals/Data/"><h4>Data</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Fundamentals/Data/Defining-content/"><h5>Defining content</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Creating-Media/"><h5>Creating Media</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Members/"><h5>Members</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Data-Types/"><h5>Data Types</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Scheduled-Publishing/"><h5>Scheduled Publishing</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Adding-Tabs/"><h5>Adding Tabs</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Dictionary-Items/"><h5>Dictionary Items</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Relations/"><h5>Relations</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Data/Users/"><h5>Users</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Fundamentals/Design/"><h4>Design</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Fundamentals/Design/Templates/"><h5>Templates</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Design/Rendering-Content/"><h5>Rendering Content</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Design/Rendering-Media/"><h5>Rendering Media</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Design/Stylesheets-Javascript/"><h5>Stylesheets Javascript</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Design/Partial-View-Macro-Files/"><h5>Partial View Macro Files</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Design/Partial-Views/"><h5>Partial Views</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Fundamentals/Code/"><h4>Code</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Fundamentals/Code/Umbraco-Services/"><h5>Umbraco Services</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Code/Subscribing-To-Events/"><h5>Subscribing To Events</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Code/Creating-Forms/"><h5>Creating Forms</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Code/Debugging/"><h5>Debugging</h5></a></li> <li class=""><a href="/documentation/Fundamentals/Code/Source-Control/"><h5>Source Control</h5></a></li> </ul> </li> </ul> </li> <li class=""> <a href="/documentation/Implementation/"><h3>Implementation</h3></a> <ul class="level-2 "> <li class=""> <a href="/documentation/Implementation/Default-Routing/"><h4>Default Routing</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Implementation/Default-Routing/Inbound-Pipeline/"><h5>Inbound Pipeline</h5></a></li> <li class=""><a href="/documentation/Implementation/Default-Routing/Controller-Selection/"><h5>Controller Selection</h5></a></li> <li class=""><a href="/documentation/Implementation/Default-Routing/Execute-Request/"><h5>Execute Request</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Implementation/Custom-Routing/"><h4>Custom Routing</h4></a> </li> <li class=""> <a href="/documentation/Implementation/Controllers/"><h4>Controllers</h4></a> </li> <li class=""> <a href="/documentation/Implementation/Data-Persistence/"><h4>Data Persistence</h4></a> </li> <li class=""> <a href="/documentation/Implementation/Rest-Api/"><h4>Rest Api</h4></a> </li> <li class=""> <a href="/documentation/Implementation/Composing/"><h4>Composing</h4></a> </li> <li class=""> <a href="/documentation/Implementation/Services/"><h4>Services</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Implementation/Services/Circular-Dependencies/"><h5>Circular Dependencies</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Implementation/Unit-Testing/"><h4>Unit Testing</h4></a> </li> </ul> </li> <li class=""> <a href="/documentation/Extending/"><h3>Extending</h3></a> <ul class="level-2 "> <li class=""> <a href="/documentation/Extending/Dashboards/"><h4>Dashboards</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Extending/Section-Trees/"><h4>Section Trees</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Extending/Section-Trees/Searchable-Trees/"><h5>Searchable Trees</h5></a></li> <li class=""><a href="/documentation/Extending/Section-Trees/Sections/"><h5>Sections</h5></a></li> <li class=""><a href="/documentation/Extending/Section-Trees/Trees/"><h5>Trees</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Extending/Property-Editors/"><h4>Property Editors</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Extending/Property-Editors/Build-a-Block-Editor/"><h5>Build a Block Editor</h5></a></li> <li class=""><a href="/documentation/Extending/Property-Editors/Package-Manifest/"><h5>Package Manifest</h5></a></li> <li class=""><a href="/documentation/Extending/Property-Editors/Property-Actions/"><h5>Property Actions</h5></a></li> <li class=""><a href="/documentation/Extending/Property-Editors/Property-Value-Converters/"><h5>Property Value Converters</h5></a></li> <li class=""><a href="/documentation/Extending/Property-Editors/Tracking/"><h5>Tracking</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Extending/Macro-Parameter-Editors/"><h4>Macro Parameter Editors</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Extending/Health-Check/"><h4>Health Check</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Extending/Health-Check/Guides/"><h5>Guides</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Extending/Language-Files/"><h4>Language Files</h4></a> </li> <li class=""> <a href="/documentation/Extending/Backoffice-Search/"><h4>Backoffice Search</h4></a> </li> <li class=""> <a href="/documentation/Extending/Backoffice-Tours/"><h4>Backoffice Tours</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Extending/Backoffice-UI-API-Documentation/"><h4>Backoffice UI API Documentation</h4></a> </li> <li class=""> <a href="/documentation/Extending/Content-Apps/"><h4>Content Apps</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Extending/Database/"><h4>Database</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Extending/Embedded-Media-Provider/"><h4>Embedded Media Provider</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Extending/FileSystemProviders/"><h4>FileSystemProviders</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Extending/FileSystemProviders/Azure-Blob-Storage/"><h5>Azure Blob Storage</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Extending/Packages/"><h4>Packages</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Extending/Packages/Creating-a-nuget-package/"><h5>Creating a nuget package</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/Creating-a-Package/"><h5>Creating a Package</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/Language-Files-For-Packages/"><h5>Language Files For Packages</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/Maintaining-Packages/"><h5>Maintaining Packages</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/Package-Actions/"><h5>Package Actions</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/Packages-on-Umbraco-Cloud/"><h5>Packages on Umbraco Cloud</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/Types-of-Packages/"><h5>Types of Packages</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/UmbPack/"><h5>UmbPack</h5></a></li> <li class=""><a href="/documentation/Extending/Packages/Uploading-to-Our/"><h5>Uploading to Our</h5></a></li> </ul> </li> </ul> </li> <li class=""> <a href="/documentation/Reference/"><h3>Reference</h3></a> <ul class="level-2 "> <li class=""> <a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/"><h4>Configuration for Umbraco 7 and 8</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/404handlers/"><h5>404handlers</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/applications/"><h5>applications</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/BaseRestExtensions/"><h5>BaseRestExtensions</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/dashboard/"><h5>dashboard</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/EmbeddedMedia/"><h5>EmbeddedMedia</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/ExamineIndex/"><h5>ExamineIndex</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/ExamineSettings/"><h5>ExamineSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/fileSystemProviders/"><h5>fileSystemProviders</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/HealthChecks/"><h5>HealthChecks</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/Serilog/"><h5>Serilog</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/tinyMceConfig/"><h5>tinyMceConfig</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/trees/"><h5>trees</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/umbracoSettings/"><h5>umbracoSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration-for-Umbraco-7-and-8/webconfig/"><h5>webconfig</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Templating/"><h4>Templating</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Templating/Macros/"><h5>Macros</h5></a></li> <li class=""><a href="/documentation/Reference/Templating/Masterpages/"><h5>Masterpages</h5></a></li> <li class=""><a href="/documentation/Reference/Templating/Modelsbuilder/"><h5>Modelsbuilder</h5></a></li> <li class=""><a href="/documentation/Reference/Templating/Mvc/"><h5>Mvc</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Querying/"><h4>Querying</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Querying/DynamicPublishedContent/"><h5>DynamicPublishedContent</h5></a></li> <li class=""><a href="/documentation/Reference/Querying/IPublishedContent/"><h5>IPublishedContent</h5></a></li> <li class=""><a href="/documentation/Reference/Querying/MemberShipHelper/"><h5>MemberShipHelper</h5></a></li> <li class=""><a href="/documentation/Reference/Querying/UmbracoHelper/"><h5>UmbracoHelper</h5></a></li> <li class=""><a href="/documentation/Reference/Querying/UDI-identifiers/"><h5>UDI identifiers</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Routing/"><h4>Routing</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Routing/Authorized/"><h5>Authorized</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/IISRewriteRules/"><h5>IISRewriteRules</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/Request-Pipeline/"><h5>Request Pipeline</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/URL-Tracking/"><h5>URL Tracking</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/Custom-Controllers/"><h5>Custom Controllers</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/Custom-Routes/"><h5>Custom Routes</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/Routing-Properties/"><h5>Routing Properties</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/Surface-Controllers/"><h5>Surface Controllers</h5></a></li> <li class=""><a href="/documentation/Reference/Routing/Umbraco-API-Controllers/"><h5>Umbraco API Controllers</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Searching/"><h4>Searching</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Searching/Examine/"><h5>Examine</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Events/"><h4>Events</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Events/EditorModel-Events/"><h5>EditorModel Events</h5></a></li> <li class=""><a href="/documentation/Reference/Events/MemberService-Events/"><h5>MemberService Events</h5></a></li> <li class=""><a href="/documentation/Reference/Events/ContentService-Events/"><h5>ContentService Events</h5></a></li> <li class=""><a href="/documentation/Reference/Events/ContentTypeService-Events/"><h5>ContentTypeService Events</h5></a></li> <li class=""><a href="/documentation/Reference/Events/DataTypeService-Events/"><h5>DataTypeService Events</h5></a></li> <li class=""><a href="/documentation/Reference/Events/FileService-Events/"><h5>FileService Events</h5></a></li> <li class=""><a href="/documentation/Reference/Events/LocalizationService-Events/"><h5>LocalizationService Events</h5></a></li> <li class=""><a href="/documentation/Reference/Events/MediaService-Events/"><h5>MediaService Events</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Management/"><h4>Management</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Management/Models/"><h5>Models</h5></a></li> <li class=""><a href="/documentation/Reference/Management/Services/"><h5>Services</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Plugins/"><h4>Plugins</h4></a> </li> <li class=""> <a href="/documentation/Reference/Cache/"><h4>Cache</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Cache/Application-Cache/"><h5>Application Cache</h5></a></li> <li class=""><a href="/documentation/Reference/Cache/Examples/"><h5>Examples</h5></a></li> <li class=""><a href="/documentation/Reference/Cache/ICacheRefresher/"><h5>ICacheRefresher</h5></a></li> <li class=""><a href="/documentation/Reference/Cache/Updating-Cache/"><h5>Updating Cache</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Security/"><h4>Security</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Security/Authenticate-with-Active-Directory/"><h5>Authenticate with Active Directory</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Auto-linking/"><h5>Auto linking</h5></a></li> <li class=""><a href="/documentation/Reference/Security/BackOfficeUserManager-and-Notifications/"><h5>BackOfficeUserManager and Notifications</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Custom-password-check/"><h5>Custom password check</h5></a></li> <li class=""><a href="/documentation/Reference/Security/External-login-providers/"><h5>External login providers</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Reset-admin-password/"><h5>Reset admin password</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Security-hardening/"><h5>Security hardening</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Security-settings/"><h5>Security settings</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Sensitive-data-on-members/"><h5>Sensitive data on members</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Serverside-sanitizing/"><h5>Serverside sanitizing</h5></a></li> <li class=""><a href="/documentation/Reference/Security/Setup-Umbraco-for-a-Fips-Server/"><h5>Setup Umbraco for a Fips Server</h5></a></li> <li class=""><a href="/documentation/Reference/Security/SSL-HTTPS/"><h5>SSL HTTPS</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/Common-Pitfalls/"><h4>Common Pitfalls</h4></a> </li> <li class=""> <a href="/documentation/Reference/Angular/"><h4>Angular</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Angular/Directives/"><h5>Directives</h5></a></li> <li class=""><a href="/documentation/Reference/Angular/Services/"><h5>Services</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Reference/API-Documentation/"><h4>API Documentation</h4></a> </li> <li class=""> <a href="/documentation/Reference/Debugging/"><h4>Debugging</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Reference/Language-Variation/"><h4>Language Variation</h4></a> </li> <li class=""> <a href="/documentation/Reference/Mapping/"><h4>Mapping</h4></a> </li> <li class=""> <a href="/documentation/Reference/Notifications/"><h4>Notifications</h4></a> </li> <li class=""> <a href="/documentation/Reference/Scheduling/"><h4>Scheduling</h4></a> </li> <li class=""> <a href="/documentation/Reference/Using-Ioc/"><h4>Using Ioc</h4></a> </li> <li class=""> <a href="/documentation/Reference/Configuration/"><h4>Configuration</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Reference/Configuration/BasicAuthSettings/"><h5>BasicAuthSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/ConnectionStringsSettings/"><h5>ConnectionStringsSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/ContentDashboard/"><h5>ContentDashboard</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/ContentSettings/"><h5>ContentSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/DataTypes/"><h5>DataTypes</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/DebugSettings/"><h5>DebugSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/ExceptionFilterSettings/"><h5>ExceptionFilterSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/GlobalSettings/"><h5>GlobalSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/HostingSettings/"><h5>HostingSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/ImagingSettings/"><h5>ImagingSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/InstallDefaultDataSettings/"><h5>InstallDefaultDataSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/KeepAliveSettings/"><h5>KeepAliveSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/LoggingSettings/"><h5>LoggingSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/MaximumUploadSizeSettings/"><h5>MaximumUploadSizeSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/ModelsBuilderSettings/"><h5>ModelsBuilderSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/NuCacheSettings/"><h5>NuCacheSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/PackageMigrationSettings/"><h5>PackageMigrationSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/PluginsSettings/"><h5>PluginsSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/RequestHandlerSettings/"><h5>RequestHandlerSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/RichTextEditorSettings/"><h5>RichTextEditorSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/RuntimeMinificationSettings/"><h5>RuntimeMinificationSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/RuntimeSettings/"><h5>RuntimeSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/SecuritySettings/"><h5>SecuritySettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/ToursSettings/"><h5>ToursSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/TypeFinderSettings/"><h5>TypeFinderSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/UnattendedSettings/"><h5>UnattendedSettings</h5></a></li> <li class=""><a href="/documentation/Reference/Configuration/WebRoutingSettings/"><h5>WebRoutingSettings</h5></a></li> </ul> </li> </ul> </li> <li class="active open"> <a href="/documentation/Tutorials/"><h3>Tutorials</h3></a> <ul class="level-2 open"> <li class=""> <a href="/documentation/Tutorials/Creating-Basic-Site/"><h4>Creating Basic Site</h4></a> <ul class="level-3 open"> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Getting-Started/"><h5>Getting Started</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Document-Types/"><h5>Document Types</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Creating-Your-First-Template-and-Content-Node/"><h5>Creating Your First Template and Content Node</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/CSS-And-Images/"><h5>CSS And Images</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Displaying-the-Document-Type-Properties/"><h5>Displaying the Document Type Properties</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Creating-Master-Template-Part-1/"><h5>Creating Master Template Part 1</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Creating-Master-Template-Part-2/"><h5>Creating Master Template Part 2</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Setting-The-Navigation-Menu/"><h5>Setting The Navigation Menu</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Articles-Parent-and-Article-Items/"><h5>Articles Parent and Article Items</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Adding-Language-Variants/"><h5>Adding Language Variants</h5></a></li> <li class=""><a href="/documentation/Tutorials/Creating-Basic-Site/Conclusions-Where-Next/"><h5>Conclusions Where Next</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Creating-a-Custom-Dashboard/"><h4>Creating a Custom Dashboard</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Creating-a-Property-Editor/"><h4>Creating a Property Editor</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Multilanguage-Setup/"><h4>Multilanguage Setup</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Starter-kit/"><h4>Starter kit</h4></a> <ul class="level-3 open"> <li class=""><a href="/documentation/Tutorials/Starter-kit/Lessons/"><h5>Lessons</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Editors-Manual/"><h4>Editors Manual</h4></a> <ul class="level-3 open"> <li class=""><a href="/documentation/Tutorials/Editors-Manual/Getting-Started-With-Umbraco/"><h5>Getting Started With Umbraco</h5></a></li> <li class=""><a href="/documentation/Tutorials/Editors-Manual/Working-with-Content/"><h5>Working with Content</h5></a></li> <li class=""><a href="/documentation/Tutorials/Editors-Manual/Version-Management/"><h5>Version Management</h5></a></li> <li class=""><a href="/documentation/Tutorials/Editors-Manual/Media-Management/"><h5>Media Management</h5></a></li> <li class=""><a href="/documentation/Tutorials/Editors-Manual/Tips-and-Tricks/"><h5>Tips and Tricks</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Add-Google-Authentication/"><h4>Add Google Authentication</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Connecting-Umbraco-Forms-and-Zapier/"><h4>Connecting Umbraco Forms and Zapier</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Creating-an-XML-Site-Map/"><h4>Creating an XML Site Map</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Creating-and-distributing-a-package/"><h4>Creating and distributing a package</h4></a> <ul class="level-3 open"> </ul> </li> <li class="active open"> <a href="/documentation/Tutorials/Creating-Custom-Views-for-Blocklist/"><h4>Creating Custom Views for Blocklist</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Creating-Tables-for-Umbraco-with-PetaPoco/"><h4>Creating Tables for Umbraco with PetaPoco</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Custom-Error-Pages/"><h4>Custom Error Pages</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Members-Registration-And-Logins/"><h4>Members Registration And Logins</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Multisite-Setup/"><h4>Multisite Setup</h4></a> <ul class="level-3 open"> </ul> </li> <li class=""> <a href="/documentation/Tutorials/Porting-Packages-V8/"><h4>Porting Packages V8</h4></a> </li> </ul> </li> <li class=""> <a href="/documentation/Add-ons/"><h3>Add ons</h3></a> <ul class="level-2 "> <li class=""> <a href="/documentation/Add-ons/UmbracoForms/"><h4>UmbracoForms</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Add-ons/UmbracoForms/Installation/"><h5>Installation</h5></a></li> <li class=""><a href="/documentation/Add-ons/UmbracoForms/Editor/"><h5>Editor</h5></a></li> <li class=""><a href="/documentation/Add-ons/UmbracoForms/Developer/"><h5>Developer</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Add-ons/Umbraco-Deploy/"><h4>Umbraco Deploy</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Add-ons/Umbraco-Deploy/Get-Started-with-Deploy/"><h5>Get Started with Deploy</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Deploy/Installing-Deploy/"><h5>Installing Deploy</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Deploy/Deployment-Workflow/"><h5>Deployment Workflow</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Deploy/Deploy-Settings/"><h5>Deploy Settings</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Deploy/Upgrades/"><h5>Upgrades</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Deploy/Troubleshooting/"><h5>Troubleshooting</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Deploy/Extending/"><h5>Extending</h5></a></li> </ul> </li> <li class=""> <a href="/documentation/Add-ons/The-Licensing-model/"><h4>The Licensing model</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Add-ons/Umbraco-Plumber/"><h4>Umbraco Plumber</h4></a> <ul class="level-3 "> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Approval-Groups/"><h5>Approval Groups</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Dashboards-and-Buttons/"><h5>Dashboards and Buttons</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Email-Templates/"><h5>Email Templates</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Events/"><h5>Events</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Getting-Started/"><h5>Getting Started</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Installing-Plumber/"><h5>Installing Plumber</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Licensing/"><h5>Licensing</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Notifications-and-Reminders/"><h5>Notifications and Reminders</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Upgrading-Plumber/"><h5>Upgrading Plumber</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Workflow-Content-App/"><h5>Workflow Content App</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Workflow-History/"><h5>Workflow History</h5></a></li> <li class=""><a href="/documentation/Add-ons/Umbraco-Plumber/Workflow-Settings/"><h5>Workflow Settings</h5></a></li> </ul> </li> </ul> </li> <li class=""> <a href="/documentation/Contribute/"><h3>Contribute</h3></a> <ul class="level-2 "> <li class=""> <a href="/documentation/Contribute/Adding-Metadata/"><h4>Adding Metadata</h4></a> </li> <li class=""> <a href="/documentation/Contribute/Code-samples/"><h4>Code samples</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Contribute/DocsTemplates/"><h4>DocsTemplates</h4></a> </li> <li class=""> <a href="/documentation/Contribute/File-Naming-Conventions/"><h4>File Naming Conventions</h4></a> </li> <li class=""> <a href="/documentation/Contribute/How-to-add-a-new-version/"><h4>How to add a new version</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Contribute/Issues/"><h4>Issues</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Contribute/Markdown-Conventions/"><h4>Markdown Conventions</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Contribute/Pull-Requests/"><h4>Pull Requests</h4></a> <ul class="level-3 "> </ul> </li> <li class=""> <a href="/documentation/Contribute/Style-Guide/"><h4>Style Guide</h4></a> <ul class="level-3 "> </ul> </li> </ul> </li> </ul> </details> </nav> </div> </div> </div> <div class="main-area"> <div class="main-content"> <div class="content-wrapper"> <div> <div class="utilities"> <ul id="breadcrumb"> <li><a href="/">Our</a></li> <li><a href="/documentation/">Documentation</a></li> <li><a href="/documentation/Tutorials/">Tutorials</a></li> <li><a href="/documentation/Tutorials/Creating-Custom-Views-for-Blocklist/">Creating Custom Views for Blocklist</a></li> </ul> </div> </div> <div style="width: 100%;" class="alertbar__red"> <h1 style="color: black; font-size: 50px; text-align: center; line-height: 50px; text-decoration: underline;">We have moved!</h1> <p style="font-size:20px; text-align: center; line-height: 50px;">You are currently looking at documentation for Umbraco 8 and older versions. <br> <span>An automated guess is that <a href="https://docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist/">docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist/</a> could be the link to the new documentation for Umbraco 9 and newer versions.</span> </p> </div> <div class="search-big"> <div class="textSearch"> <input type="search" class="docs-search-input" required placeholder="Search for documentation"> <label for="search">Search for documentation</label> </div> </div> <ul class="search-all-results docs-search-listing"></ul> <div id="markdown-docs" class="docs-default-listing markdown-syntax"> <style> #markdown-docs .anchorjs-link { color: #ff6e00 !important; font-size: 20px !important; text-decoration: none !important; } #markdown-docs a.offset-anchor { visibility: hidden; position: relative; top: -100px; display: block; } </style> <script type="text/javascript" src="/scripts/anchorjs/anchorjs.custom.js"></script> <script type="text/javascript"> $(document).ready(function () { anchors.options = { placement: 'left', visible: "hover", anchorCreated: function (e) { var id = $(e).attr('id'); //clear it's id since we'll be creating a custom anchor point with an offset $(e).removeAttr("id"); $(e).addClass("anchorjs-heading"); $(e).prepend("<a class='offset-anchor' id='" + id + "'></a>"); } }; anchors.add('.markdown-syntax h1, .markdown-syntax h2, .markdown-syntax h3, .markdown-syntax h4, .markdown-syntax h5, .markdown-syntax h5'); var element = $(window.location.hash); if (element.length === 1) { setTimeout(function () { //hightlight it element.closest(".anchorjs-heading").css("color", "#ff6e00"); element.closest(".anchorjs-heading").find("a").not(".anchorjs-link").css("color", "#ff6e00"); }, 100); } $("#markdown-docs .anchorjs-link").click(function () { if (element.length === 1) { //un hightlight it element.closest(".anchorjs-heading").css("color", "inherit"); element.closest(".anchorjs-heading").find("a").not(".anchorjs-link").css("color", "inherit"); } }); }); </script> <aside> <div class="info-box docs-version-panel"> <dl> <dt>Versions</dt> <dd class="current-version selected-version"> 8.0.0 + </dd> </dl> </div> </aside> <h1 id="custom-views-for-block-list">Custom Views for Block List</h1> <p>Custom Views are used to overwrite the AngularJS view for the Block List in the Content editor. We can improve the editing experience by overwriting the default representation of our block entries with a custom view that will provide a better view of how the content will look on the frontend.</p> <h2 id="creating-the-document-type">Creating the Document Type</h2> <p>For this tutorial, we will set-up a simple document type and create a new property using Block List as the property editor.</p> <p>To create a Document Type:</p> <ol> <li><p>Go to <strong>Settings</strong>.</p> </li> <li><p>Select the <strong>...</strong> next to the <strong>Document Types</strong> in the <strong>Settings</strong> tree.</p> </li> <li><p>Select <strong>Document Type with Template</strong>.</p> <div class="tip"><p>Using folders can help you organize your <strong>Document Types</strong>.</p> </div> </li> <li><p>Enter a <strong>Name</strong> for the <strong>Document Type</strong>. Let's call it <em>Product</em>. You'll notice that an <strong>Alias</strong> is automatically created.</p> </li> <li><p>Click <strong>Add Group</strong> and <strong>Enter a Name</strong> for the group. Let's call it <em>Product Details</em>.</p> </li> <li><p>Add the following properties: <img src="images/document-properties.png" alt="Document Properties" /></p> </li> <li><p>Add another group called <strong>Features</strong> and a property with the following specification:</p> <table> <thead> <tr> <th>Name</th> <th>Features</th> </tr> </thead> <tbody> <tr> <td>Alias</td> <td>features</td> </tr> <tr> <td>Data Type</td> <td>Block List</td> </tr> </tbody> </table> </li> <li><p>Click <strong>Save</strong>. Your document type should look like: <img src="images/document-type.png" alt="Document Type" /></p> </li> </ol> <h2 id="creating-the-content-node">Creating the Content Node</h2> <p>To create the Content Node:</p> <ol> <li>Go to the <strong>Permissions</strong> tab of the root content node and select <strong>Add Child</strong> in the <strong>Allowed child node types</strong>. The <strong>Choose Child Node</strong> window appears.</li> <li>Select the <strong>Product</strong> document type and click <strong>Save</strong>.</li> <li>Go to <strong>Content</strong>.</li> <li>Select <strong>...</strong> next to the root content node and select <strong>Product</strong>.</li> <li><strong>Enter the Name</strong> for the article. We are going to call it <em>Product</em>.</li> <li>Fill the required details in the <strong>Product</strong> page and click <strong>Save</strong>.</li> </ol> <h2 id="configuring-the-block-list-editor">Configuring the Block List Editor</h2> <p>To configure the Block List editor:</p> <ol> <li><p>Go to <strong>Settings</strong> and open the <strong>Product</strong> document type.</p> </li> <li><p>Click on the <strong>Block List</strong> property we created earlier. You'll see the Block list editor's configuration, as shown below:</p> <p><img src="images/blocklist-editor-settings.png" alt="Document Type" /></p> </li> </ol> <p>In the <strong>Configuration</strong> section, we can add <strong>Available Blocks</strong>, define the range of blocks that can be added, control the live and inline editing mode, or set the property editor width. The Available Blocks in the Block List editor configuration differentiates it from the other property editors. The list you create with the Block List editor is based on one or more blocks. Each block is based on an Element Type.</p> <p>To add blocks to our Block List editor:</p> <ol> <li><p>Click <strong>Add</strong> in the <strong>Available Blocks</strong>. The <strong>Pick Element Type</strong> window opens. From here, you have the option to select an existing Element Type, if any, or you can create a new Element Type from the configuration screen.</p> </li> <li><p>For this tutorial, we will <strong>Create a new Element Type</strong>.</p> </li> <li><p>Setup a new Element type called <strong>Feature</strong> and use the following configuration:</p> <table> <thead> <tr> <th>Property Name</th> <th>Alias</th> <th>Editor</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td>featureName</td> <td>Textstring</td> </tr> <tr> <td>Details</td> <td>details</td> <td>Textarea</td> </tr> <tr> <td>Image</td> <td>image</td> <td>Media Picker</td> </tr> </tbody> </table> </li> <li><p>Click <strong>Save and Close</strong>. The block configuration window opens. For more information on the block configuration, see the <a href="../../Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Block-List-Editor/index#setup-block-types" rel="nofollow">Setup Block Types</a> section.</p> </li> <li><p>Similarly, I'll set up another block called <strong>Hero</strong>.</p> </li> <li><p>Toggle <strong>Live Editing mode</strong> and select <strong>Submit</strong>.</p> </li> </ol> <h2 id="creating-custom-views-for-blocks">Creating Custom Views for blocks</h2> <p>We can improve the editing experience by overwriting the default representation of our block entries with a custom view that provides a better view of how the content will look on the frontend. Currently, you can only pick HTML files for a custom view. AngularJS powers these views, and therefore you can write any AngularJS logic.</p> <p>Let's create a <code>custom.html</code> file with the following configuration:</p> <div class="highlight xml"><pre> <<span class="element">section</span> <span class="attribute">id</span><span class="string">=</span><span class="quot">"</span><span class="string">banner</span><span class="quot">"</span> <span class="attribute">ng-click</span><span class="string">=</span><span class="quot">"</span><span class="string">block.edit()</span><span class="quot">"</span>> <<span class="element">div</span> <span class="attribute">class</span><span class="string">=</span><span class="quot">"</span><span class="string">content</span><span class="quot">"</span>> <<span class="element">header</span>> <<span class="element">h1</span>>{{block.data.featureName}}</<span class="element">h1</span>> </<span class="element">header</span>> <<span class="element">p</span>>{{block.data.details}}</<span class="element">p</span>> </<span class="element">div</span>> </<span class="element">section</span>> </pre></div> <div class="note"><p>Once the HTML file is updated, make sure that you restart your application.</p> </div> <h3 id="assigning-the-view-to-the-block">Assigning the View to the Block</h3> <p>Now that we have created our view, let's assign it to our block:</p> <ol> <li>Go to <strong>Product</strong> in the <strong>Settings</strong> tree.</li> <li>Click the <code>cog</code> wheel next to <strong>Features</strong>.</li> <li>Select the <strong>Product - Features - Block List</strong>. The <strong>Editor Settings</strong> window opens.</li> <li>Select <strong>Feature</strong> from the <strong>Available Blocks</strong> configuration. The <strong>Configuration of 'Feature'</strong> window opens.</li> <li>Select <strong>Add Custom View</strong> in <strong>Custom View</strong> and browse to the <strong>custom.html</strong> file. <img src="images/View-location.png" alt="Browse View Location" /></li> <li>Click <strong>Submit</strong>.</li> </ol> <h3 id="adding-content-to-the-blocks">Adding Content to the Blocks</h3> <p>To add content to the blocks:</p> <ol> <li>Go to the <strong>Content</strong> section and select <strong>Product</strong>.</li> <li>Select <strong>Add Content</strong> in the <strong>Features</strong> group. The <strong>Add Content</strong> displays the blocks we created earlier. <img src="images/Content-block-list.png" alt="Add content to the blocks" /></li> <li>Select <strong>Feature</strong>. The <strong>Feature</strong> window opens.</li> <li>Enter the <strong>Name</strong> and <strong>Details</strong> in the Feature window. You will notice you can view the content as you type. This is because we have enabled the <strong>Live editing</strong> mode.</li> <li>Click <strong>Confirm</strong>. <img src="images/Feature-Content.png" alt="Feature Content" /></li> </ol> <h2 id="creating-settings-section-for-blocks">Creating <code>Settings</code> section for Blocks</h2> <p>Now, we have overwritten the AngularJS view for the content editor's block presentation by using our own view. Let's create a <strong>Settings</strong> section to control the data alignment of the block. To do this, we need to add a <strong>Settings</strong> model to our block configuration.</p> <p>To add a Settings model:</p> <ol> <li>Go to <strong>Product</strong> in the <strong>Settings</strong> tree.</li> <li>Click the <code>cog</code> wheel next to <strong>Features</strong>.</li> <li>Select the <strong>Product - Features - Block List</strong>. The <strong>Editor Settings</strong> window opens.</li> <li>Select <strong>Feature</strong> from the <strong>Available Blocks</strong> configuration.</li> <li>Select <strong>Settings Model</strong> in the Data Models section. The <strong>Attach a settings Element Type</strong> window opens.</li> <li>Select <strong>Create new Element Type</strong>. <ol type="a"> <li><strong>Enter a Name</strong> for the element type. Let's say <em>Feature Settings</em>.</li> <li>Give it an icon.</li> <li>Click <strong>Add Group</strong> and <strong>Enter a Name</strong>. Let's call it <em>Settings</em>.</li> <li>Click <strong>Add Property</strong> and <strong>Enter a Name</strong>. Let's call it <em>Block Alignment</em>. An alias <em>blockTheme</em> is generated.</li> <li>Select <strong>Dropdown List</strong> as the editor. The <strong>Editor Settings</strong> window opens.</li> <li>In the Add prevalue field, add <strong>left</strong>, <strong>center</strong> and <strong>right</strong> as values. <img src="images/prevalue-options-1.png" alt="Prevalue Options" /></li> <li>Click <strong>Submit</strong>.</li> </ol> </li> <li>Click <strong>Submit</strong>.</li> <li>Click <strong>Save and Close</strong>. <img src="images/Feature-Settings-1.png" alt="Feature Settings" /></li> <li>Click <strong>Submit</strong> until you reach the Product document type.</li> <li>Click <strong>Save</strong>.</li> </ol> <p>We need to update the <code>custom.html</code> file with the following configuration:</p> <div class="highlight xml"><pre> <<span class="element">section</span> <span class="attribute">id</span><span class="string">=</span><span class="quot">"</span><span class="string">banner</span><span class="quot">"</span> <span class="attribute">ng-click</span><span class="string">=</span><span class="quot">"</span><span class="string">api.editBlock(block, block.hideContentInOverlay, index, parentForm)</span><span class="quot">"</span>> <<span class="element">div</span> <span class="attribute">class</span><span class="string">=</span><span class="quot">"</span><span class="string">text-block</span><span class="quot">"</span> <span class="attribute">ng-class</span><span class="string">=</span><span class="quot">"</span><span class="string">{'block-left': block.settingsData.blockAlignment[0] === 'left', 'block-center': block.settingsData.blockAlignment[0] === 'center', 'block-right': block.settingsData.blockAlignment[0] === 'right' }</span><span class="quot">"</span>> <<span class="element">div</span> <span class="attribute">class</span><span class="string">=</span><span class="quot">"</span><span class="string">content</span><span class="quot">"</span>> <<span class="element">header</span>> <<span class="element">h1</span>>{{block.data.featureName}}</<span class="element">h1</span>> </<span class="element">header</span>> <<span class="element">p</span>>{{block.data.details}}</<span class="element">p</span>> </<span class="element">div</span>> </<span class="element">div</span>> </<span class="element">section</span>> </pre></div> <p>Additionally, we need to update our stylesheet to use the color configuration. For this tutorial, I have created a <code>style.css</code> stylesheet with the following styles:</p> <div class="highlight"><pre>@import url(https://fonts.googleapis.com/css?family=Montserrat|Source+Sans+Pro:400,700,300,600,600italic,400italic); body { font-family: 'Source Sans Pro', sans-seif; } h1{ font-weight:900; } .text-block{ padding:20px; } .block-left { text-align: left; border: 3px solid green; padding: 10px; } .block-center { text-align: center; border: 3px solid green; padding: 10px; } .block-right{ text-align: right; border: 3px solid green; padding: 10px; }</pre></div><h3 id="assigning-the-stylesheet-to-the-block">Assigning the Stylesheet to the Block</h3> <p>Now that we have updated our view and stylesheet let's assign it to our block.</p> <ol> <li>Go to <strong>Product</strong> in the <strong>Settings</strong> tree.</li> <li>Click the <code>cog</code> wheel next to <strong>Features</strong>.</li> <li>Select the <strong>Product - Features - Block List</strong>. The <strong>Editor Settings</strong> window opens.</li> <li>Select <strong>Feature</strong> from the <strong>Availabe Blocks</strong> configuration. The <strong>Configuration of 'Feature'</strong> window opens.</li> <li>Select <strong>Add Stylesheet</strong> and browse to <strong>style.css</strong>. <img src="images/Stylesheet-location.png" alt="Stylesheet Location" /></li> <li>Select <strong>Add Settings</strong> in the <strong>Settings model</strong> and select <strong>Feature Settings</strong>.</li> <li>Click <strong>Submit</strong> until you reach the Product document type.</li> <li>Click <strong>Save</strong>.</li> <li>Restart your application. Now, when you head over to the <strong>Product</strong> page in the <strong>Content</strong> section and hover over the block you will notice the settings option. <img src="images/Settings-option.png" alt="Stylesheet Location" /></li> <li>Click on <strong>Edit Settings</strong> and you can see the <strong>Block Theme</strong> options we created. <img src="images/Feature-Options-1.png" alt="Feature Options" /></li> <li><strong>Select a Theme</strong> of your choice and click on <strong>Submit</strong> to see the changes reflect on your block. <img src="images/Block-settings-1.png" alt="Feature Options" /></li> </ol> <h2 id="rendering-the-block-list-content">Rendering the Block List Content</h2> <p>To render the stored value of your Block List editor on the frontend, see the <a href="../../Fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Block-List-Editor/index#rendering-block-list-content" rel="nofollow">Rendering Block List Content</a> section.</p> <iframe width="800" height="450" title="Custom Views for Blocks" src="https://www.youtube.com/embed/Gp_ek2-FJNY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> </div> </div> </div> </div> <script type="text/template" class="search-item-docs"> <li> <a href="{{ url }}"> <div class="type-icon"> <i class="icon-Book-alt"></i> </div> <div class="type-context"> <div class="type-name"> {{ name }} </div> <div class="type-description"> {{ body }} </div> </div> </a> </li> </script> </div> </div> <footer> <div class="container is-narrow-tablet"> <div class="row"> <div class="col-xs-12"> <p><a href="/code-of-conduct">Code Of Conduct</a> - <a href="/privacy-policy">Privacy Policy</a></p> <p> </p> Our.umbraco.com is the community mothership for <a href="https://umbraco.com" target="_blank" rel="noopener noreferrer">Umbraco</a>, the open source asp.net cms. With a friendly forum for all your questions, a comprehensive documentation and a ton of packages from the community. </div> </div> </div> </footer> </div>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js" type="text/javascript"></script><script src="https://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Editor.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Sanitizer.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js" type="text/javascript"></script><script src="/DependencyHandler.axd?s=L2Fzc2V0cy9qcy9qcXVlcnkuYWpheGZpbGV1cGxvYWQuanM7L2Fzc2V0cy9qcy9qcXVlcnkuc2Nyb2xseS5qczsvYXNzZXRzL2pzL2xvZGFzaC5taW4uanM7L2Fzc2V0cy9qcy9jb21tdW5pdHkuanM7L2Fzc2V0cy9qcy9hcHAubWluLmpzOy9hc3NldHMvanMvZWRpdG9yLm1pbi5qczs&t=Javascript&cdv=25022601" type="text/javascript"></script> </body> </html>

CINXE.COM

Creating Custom Views For Blocklist, Tutorials - Our Umbraco