GITBOOK-4: Created Landing Pages

Author: eshanrnh

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Extending_Backoffice_UI_API.png

@@ -6,6 +6,7 @@
 
 ## Getting Started
 
+* [First Steps with UI Builder](getting-started/first-steps-with-ui-builder.md)
 * [Requirements](getting-started/requirements.md)
 * [Installing Umbraco UI Builder](getting-started/installation.md)
 * [Licensing](getting-started/licensing-model.md)
@@ -14,6 +15,7 @@
 
 ## Upgrading
 
+* [Upgrade your UI Builder setup](upgrading/upgrade-your-ui-builder-setup.md)
 * [Upgrading Umbraco UI Builder](upgrading/upgrade.md)
 * [Version Specific Upgrade Notes](upgrading/version-specific.md)
 * [Migrate from Konstrukt to Umbraco UI Builder](upgrading/migrating-from-konstrukt-to-umbraco-ui-builder.md)
@@ -24,7 +26,7 @@
 
 ## Areas
 
-* [Overview](areas/overview.md)
+* [Explore Areas in UI Builder](areas/overview.md)
 * [Sections](areas/sections.md)
   * [Summary Dashboards](areas/summary-dashboards.md)
 * [Trees](areas/trees.md)
@@ -34,7 +36,7 @@
 
 ## Collections
 
-* [Overview](collections/overview.md)
+* [Work with Collections in UI Builder](collections/overview.md)
 * [The Basics](collections/the-basics.md)
 * [List Views](collections/list-views.md)
   * [Field Views](collections/field-views.md)
@@ -47,37 +49,38 @@
 
 ## Searching
 
-* [Overview](searching/overview.md)
+* [Add Search to Your Collections](searching/overview.md)
 * [Searchable Properties](searching/searchable-properties.md)
 
 ## Filtering
 
-* [Overview](filtering/overview.md)
+* [Filter Your Data with Ease](filtering/overview.md)
 * [Global Filters](filtering/global-filters.md)
 * [Data Views](filtering/data-views.md)
   * [Data Views Builders](filtering/data-views-builders.md)
 * [Filterable Properties](filtering/filterable-properties.md)
 
 ## Actions
 
-* [Overview](actions/overview.md)
+* [Trigger Actions in UI Builder](actions/overview.md)
 * [The Basics](actions/the-basics.md)
 * [Action Visibility](actions/action-visibility.md)
 * [Inbuilt Actions](actions/inbuilt-actions.md)
 
 ## Cards
 
-* [Overview](cards/overview.md)
+* [Display Insights with Cards](cards/overview.md)
 * [Count Cards](cards/count-cards.md)
 * [Custom Cards](cards/custom-cards.md)
 
 ## Property Editors
 
-* [Overview](property-editors/overview.md)
+* [Enhance Input with Property Editors](property-editors/overview.md)
 * [Entity Picker](property-editors/entity-picker.md)
 
 ## Advanced
 
+* [Ready to go deeper?](advanced/ready-to-go-deeper.md)
 * [Virtual Sub Trees](advanced/virtual-sub-trees.md)
 * [Encrypted Properties](advanced/encrypted-properties.md)
 * [Value Mappers](advanced/value-mappers.md)

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Extending_Dashboards.png

@@ -1,15 +1,13 @@
 ---
-description: Learn how to configure actions in Umbraco UI Builder.
+description: >-
+  Actions allow users to interact with data—like saving, deleting, or running
+  custom processes.
 ---
 
-# Actions
+# Trigger Actions in UI Builder
 
-Actions allow you to perform custom tasks on collections and their entities from different areas in the UI. For Example: menu actions, bulk actions, or individual table row actions.
+Actions allow you to perform custom tasks on collections and their entities from different areas in the UI. For Example, menu actions, bulk actions, or individual table row actions.
 
-![Bulk Actions UI](../images/bulk_actions.png)
+This section covers the basics of configuring actions, controlling their visibility, and using inbuilt options for quick setup.
 
-To get started with actions, check out the basics:
-
-{% content-ref url="the-basics.md" %}
-[the-basics.md](the-basics.md)
-{% endcontent-ref %}
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>The Basics</strong></td><td><p>Understand what actions are, how they work, and how to set them up in UI Builder.</p><p></p></td><td><a href="the-basics.md">the-basics.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Basic_Website.png">Documentations Icons_Umbraco_CMS_Tutorials_Basic_Website.png</a></td></tr><tr><td><strong>Action Visibility</strong></td><td><p>Control when and where actions are visible based on context or conditions.</p><p></p></td><td><a href="action-visibility.md">action-visibility.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Deploy_Setup.png">Documentations Icons_Umbraco_Deploy_Setup.png</a></td></tr><tr><td><strong>Inbuilt Actions</strong></td><td>Use UI Builder’s pre-defined actions to handle common tasks with minimal setup.</td><td><a href="inbuilt-actions.md">inbuilt-actions.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Umbraco_Forms_and_Zapier.png">Documentations Icons_Umbraco_CMS_Tutorials_Umbraco_Forms_and_Zapier.png</a></td></tr></tbody></table>

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Extending_Sections_and_Trees.png

@@ -0,0 +1,5 @@
+# Ready to go deeper?
+
+This section includes advanced concepts for extending UI Builder’s functionality—from handling data encryption to customizing how values are mapped and stored.
+
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Virtual Sub Trees</strong></td><td><p>Add dynamic, data-driven subtrees under your tree nodes for more flexible navigation.</p><p></p></td><td><a href="virtual-sub-trees.md">virtual-sub-trees.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Extending_Sections_and_Trees.png">Documentations Icons_Umbraco_CMS_Extending_Sections_and_Trees.png</a></td></tr><tr><td><strong>Encrypted Properties</strong></td><td><p>Secure sensitive data by enabling encryption on selected properties.</p><p></p></td><td><a href="encrypted-properties.md">encrypted-properties.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Google_Authentification.png">Documentations Icons_Umbraco_CMS_Tutorials_Google_Authentification.png</a></td></tr><tr><td><strong>Value Mappers</strong></td><td><p>Transform data between your models and the UI using custom value mappers.</p><p></p></td><td><a href="value-mappers.md">value-mappers.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Sustainability_Best_Practices_Infrastructure.png">Documentations Icons_Umbraco_Sustainability_Best_Practices_Infrastructure.png</a></td></tr><tr><td><strong>Repositories</strong></td><td><p>Customize how data is queried and saved by working with repositories.</p><p></p></td><td><a href="repositories.md">repositories.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Reference_Caching.png">Documentations Icons_Umbraco_CMS_Reference_Caching.png</a></td></tr><tr><td><strong>Events</strong></td><td>Hook into UI Builder events to execute custom logic during CRUD operations.</td><td><a href="events.md">events.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Reference_Notifications.png">Documentations Icons_Umbraco_CMS_Reference_Notifications.png</a></td></tr></tbody></table>

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals.png

@@ -1,17 +1,19 @@
 ---
-description: Learn how to choose and configure the appropriate area for connecting Umbraco UI builder for Umbraco.
+description: >-
+  Learn how to choose and configure the appropriate area for connecting Umbraco
+  UI builder for Umbraco.
 ---
 
-# Areas
+# Explore Areas in UI Builder
 
 Umbraco UI Builder can be integrated into different areas of the Umbraco Backoffice. Before you start managing content, it is essential to decide which area best suits the presentation of your data. Each area offers unique features for displaying and interacting with content.
 
 Once you have identified the most appropriate area, you can proceed with configuring it to suit your needs.
 
-## Key Areas for Integration
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td>Learn how to organize your content in a structured layout, enabling users to navigate different parts of the backoffice.</td><td><a href="sections.md">sections.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Workflow_Section_Overview.png">Documentations Icons_Umbraco_Workflow_Section_Overview.png</a></td></tr><tr><td><strong>Dashboards</strong></td><td>Understand how to create custom views that provide quick access to key information and statistics.</td><td><a href="dashboards.md">dashboards.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Extending_Dashboards.png">Documentations Icons_Umbraco_CMS_Extending_Dashboards.png</a></td></tr><tr><td><strong>Context Apps</strong></td><td>Enhance the editing experience by adding context-aware apps to specific tree nodes.</td><td><a href="context-apps.md">context-apps.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals.png">Documentations Icons_Umbraco_CMS_Fundamentals.png</a></td></tr></tbody></table>
 
-- [Sections](sections.md): The Sections area allows you to organize your content in a structured layout, enabling users to navigate different parts of the backoffice.
-- [Dashboards](dashboards.md): The Dashboards area is ideal for creating custom views that provide quick access to key information and statistics.
-- [Context Apps](context-apps.md): Context Apps provide contextual tools and information based on the specific content a user is working with.
+## Also in this section
 
-Selecting the correct area is essential to ensure your UI is both functional and user-friendly. Consider the nature of your content and the tasks users need to perform when deciding which area to use.
+{% content-ref url="trees.md" %}
+[trees.md](trees.md)
+{% endcontent-ref %}

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals_Data.png

@@ -1,19 +1,11 @@
 ---
-description: Learn how to configure cards in Umbraco UI Builder.
+description: Cards provide a visual summary of data, like counts or custom metrics.
 ---
 
-# Cards
+# Display Insights with Cards
 
 Cards provide an API to display summary information in a card-based format, which is useful for displaying key metrics about a collection.
 
-![Cards](../images/cards.png)
+This section shows you how to use and create cards in your collections.
 
-Cards can be defined in two ways:
-
-{% content-ref url="count-cards.md" %}
-[Count Cards](count-cards.md)
-{% endcontent-ref %}
-
-{% content-ref url="custom-cards.md" %}
-[Custom Cards](custom-cards.md)
-{% endcontent-ref %}
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Count Cards</strong></td><td><p>Display simple number-based summaries of your collection data.</p><p></p></td><td><a href="count-cards.md">count-cards.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Multilingual_Website.png">Documentations Icons_Umbraco_CMS_Tutorials_Multilingual_Website.png</a></td></tr><tr><td><strong>Custom Cards</strong></td><td>Create custom cards to visualize metrics, statuses, or trends relevant to your content.</td><td><a href="custom-cards.md">custom-cards.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Reference_Templating.png">Documentations Icons_Umbraco_CMS_Reference_Templating.png</a></td></tr></tbody></table>

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Implementation_Data_Persistence.png

@@ -1,16 +1,16 @@
 ---
-description: Configuring collection in Umbraco UI Builder to manage entity groups and define their UI integration.
+description: >-
+  Configuring collection in Umbraco UI Builder to manage entity groups and
+  define their UI integration.
 ---
 
-# Collections
+# Work with Collections in UI Builder
 
 A collection in Umbraco UI Builder represents a group of entities for a specific data model. It serves as the primary configuration object for defining how the collection integrates into the UI.
 
-You can configure its list view appearance and editing options.
+This section guides you through the basics of creating collections, customizing list views and editors, and linking related data types together.
 
-![A collection list view](../images/listview.png)
-
-Get started by reviewing the basics of collection configuration.
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>The Basics</strong></td><td>Learn the fundamentals of collections and how they’re used to manage data in UI Builder.</td><td><a href="the-basics.md">the-basics.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Basic_Website.png">Documentations Icons_Umbraco_CMS_Tutorials_Basic_Website.png</a></td></tr><tr><td><strong>List Views</strong></td><td>Customize how data is displayed in collections using flexible list view options.</td><td><a href="list-views.md">list-views.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Custom_Views_Block_List.png">Documentations Icons_Umbraco_CMS_Tutorials_Custom_Views_Block_List.png</a></td></tr><tr><td><strong>Editors</strong></td><td>Configure how items in a collection are created, edited, and saved using custom editors.</td><td><a href="editors.md">editors.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Sustainability_Best_Practices_Editors.png">Documentations Icons_Umbraco_Sustainability_Best_Practices_Editors.png</a></td></tr><tr><td><strong>Child Collections</strong></td><td>Nest collections inside others to manage complex data relationships.</td><td><a href="child-collections.md">child-collections.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Multilingual_Website.png">Documentations Icons_Umbraco_CMS_Tutorials_Multilingual_Website.png</a></td></tr><tr><td><strong>Related Collections</strong></td><td>Create connections between different collections to allow for relational data management.</td><td><a href="related-collections.md">related-collections.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_MultiSite_Setup.png">Documentations Icons_Umbraco_CMS_Tutorials_MultiSite_Setup.png</a></td></tr><tr><td><strong>Entity Identifier Converters</strong></td><td>Use identifier converters to customize how related entities are referenced and stored.</td><td><a href="entity-identifier-converters.md">entity-identifier-converters.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Deploy_Deployment_Workflow.png">Documentations Icons_Umbraco_Deploy_Deployment_Workflow.png</a></td></tr></tbody></table>
 
 {% content-ref url="the-basics.md" %}
 [the-basics.md](the-basics.md)

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Implementation_Routing.png

@@ -1,21 +1,9 @@
 ---
-description: Learn how to configure filtering in Umbraco UI Builder.
+description: Enhance your collections by adding powerful filtering options.
 ---
 
-# Filtering
+# Filter Your Data with Ease
 
-In addition to [Searching](../searching/overview.md), you may need to create specific views of a collection's data. Umbraco UI Builder provides multiple filtering mechanisms to help with this.
+This section explains how to configure global filters, create data views, and define filterable properties to streamline data management.
 
-![Filterable Properties](../images/filterable_properties.png)
-
-Choose a filtering method from the list below to find out more.
-
-{% content-ref url="global-filters.md" %}
-[global-filters.md](global-filters.md)
-{% endcontent-ref %}
-{% content-ref url="data-views.md" %}
-[data-views.md](data-views.md)
-{% endcontent-ref %}
-{% content-ref url="filterable-properties.md" %}
-[filterable-properties.md](filterable-properties.md)
-{% endcontent-ref %}
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Global Filters</strong></td><td><p>Apply filters across multiple collections or views to maintain a consistent filtering experience.</p><p></p></td><td><a href="global-filters.md">global-filters.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Sustainability_Best_Practices_Infrastructure.png">Documentations Icons_Umbraco_Sustainability_Best_Practices_Infrastructure.png</a></td></tr><tr><td><strong>Data Views</strong></td><td><p>Create alternate views of your data using predefined filters and custom layouts.</p><p></p></td><td><a href="data-views.md">data-views.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals_Data.png">Documentations Icons_Umbraco_CMS_Fundamentals_Data.png</a></td></tr><tr><td><strong>Filterable Properties</strong></td><td>Define which properties users can filter by within a collection to narrow down visible data.</td><td><a href="filterable-properties.md">filterable-properties.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Forms_Creating_A_Form.png">Documentations Icons_Umbraco_Forms_Creating_A_Form.png</a></td></tr></tbody></table>

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Install.png

@@ -0,0 +1,11 @@
+---
+description: >-
+  Everything you need to set up, configure, and explore the basics of UI
+  Builder.
+---
+
+# First Steps with UI Builder
+
+Begin your journey with UI Builder by learning the essential setup steps, requirements, and how the interface works.
+
+<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Requirements</strong></td><td>Understand the prerequisites needed to use Umbraco UI Builder effectively, including supported versions and dependencies.</td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Cloud_Setup.png">Documentations Icons_Umbraco_Cloud_Setup.png</a></td><td><a href="requirements.md">requirements.md</a></td></tr><tr><td><strong>Installing Umbraco UI Builder</strong></td><td>Step-by-step guide to installing UI Builder in your Umbraco project, from package setup to first launch.</td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Install.png">Documentations Icons_Umbraco_CMS_Install.png</a></td><td><a href="installation.md">installation.md</a></td></tr><tr><td><strong>Licensing</strong></td><td>Find out how licensing works, what’s included, and how to activate your license key.</td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Google_Authentification.png">Documentations Icons_Umbraco_CMS_Tutorials_Google_Authentification.png</a></td><td><a href="licensing-model.md">licensing-model.md</a></td></tr><tr><td><strong>Configuration</strong></td><td>Learn how to configure UI Builder to suit your project needs.</td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Implementation_Data_Persistence.png">Documentations Icons_Umbraco_CMS_Implementation_Data_Persistence.png</a></td><td><a href="configuration.md">configuration.md</a></td></tr><tr><td><strong>User Interface</strong></td><td>Explore the UI Builder interface and get familiar with its layout, tools, and navigation elements.</td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Extending_Dashboards.png">Documentations Icons_Umbraco_CMS_Extending_Dashboards.png</a></td><td><a href="user-interface.md">user-interface.md</a></td></tr></tbody></table>

15/umbraco-ui-builder/.gitbook/assets/Documentations Icons_Umbraco_CMS_Reference_Caching.png

@@ -1,13 +1,13 @@
 ---
-description: Available property editors in Umbraco UI Builder for managing data in Umbraco content nodes.
+description: Property Editors let you customize the editing experience in your collections.
 ---
 
-# Property Editors
+# Enhance Input with Property Editors
 
 Umbraco UI Builder provides property editors for managing data inside Umbraco content nodes.
 
-The available property editors are:
+This section helps you implement advanced fields like pickers and converters.
 
 {% content-ref url="entity-picker.md" %}
-[Entity Picker](entity-picker.md)
+[entity-picker.md](entity-picker.md)
 {% endcontent-ref %}