Updated articles

15/umbraco-ui-builder/.gitbook.yaml

@@ -10,3 +10,6 @@ getting-started/upgrading/version-specific-upgrades: upgrading/version-specific.
 getting-started/installation: installation/installation.md
 getting-started/licensing-model: installation/licensing-model.md
 guides/migrating-from-konstrukt-to-umbraco-ui-builder: upgrading/migrating-from-konstrukt-to-umbraco-ui-builder.md
+getting-started/overview: getting-started/requirements.md
+installation/installation: getting-started/installation.md
+installation/licensing-model: getting-started/licensing-model.md

15/umbraco-ui-builder/README.md

@@ -16,7 +16,7 @@ With Umbraco UI Builder, custom backoffice integrations can now take a matter of
 
 **This documentation is aimed at developers** who have at least a basic understanding of Umbraco, as well as C#/MVC principles.
 
-If you are new to Umbraco UI Builder, it is recommended that you start by taking a look at the [Getting Started](getting-started/overview.md) section. This provides details on the system requirements and how to install Umbraco UI Builder.
+If you are new to Umbraco UI Builder, it is recommended that you start by taking a look at the [Getting Started](getting-started/requirements.md) section. This provides details on the system requirements and how to install Umbraco UI Builder.
 
 Once you have Umbraco UI Builder installed and are wondering "What next?" then you'll want to take a look at the [Guides](guides/creating-your-first-integration.md) section. This provides a quick-start example of how to configure Umbraco UI Builder.
 

15/umbraco-ui-builder/SUMMARY.md

@@ -4,26 +4,23 @@
 * [Known Issues](known-issues.md)
 * [Release Notes](release-notes.md)
 
-## Installation
+## Getting Started
 
-* [Installing Umbraco UI Builder](installation/installation.md)
-* [Licensing](installation/licensing-model.md)
+* [Requirements](getting-started/requirements.md)
+* [Installing Umbraco UI Builder](getting-started/installation.md)
+* [Licensing](getting-started/licensing-model.md)
+* [Configuration](getting-started/configuration.md)
+* [User Interface](getting-started/user-interface.md)
 
 ## Upgrading
 
 * [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)
 
-## Getting Started
-
-* [Overview](getting-started/overview.md)
-* [Configuration](getting-started/configuration.md)
-* [User Interface](getting-started/user-interface.md)
-
 ## How-to Guides
 
-* [Creating your first integration](guides/creating-your-first-integration.md)
+* [Creating your First Integration](guides/creating-your-first-integration.md)
 
 ## Areas
 

15/umbraco-ui-builder/getting-started/configuration.md

@@ -1,25 +1,33 @@
 ---
-description: Configuring Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Learn how to configure Umbraco UI Builder using the extension method.
 ---
 
 # Configuration
 
-Umbraco UI Builder can be configured directly via the `AddUIBuilder` extension method on `IUmbracoBuilder`.
+You can configure Umbraco UI Builder using the `AddUIBuilder` extension method in `Program.cs`.
 
-## AddUIBuilder
+## Using `AddUIBuilder`
 
-To configure Umbraco UI Builder via the `AddUIBuilder` extension method, You can look in the `Program.cs` file in the root of your web project. From within this file, before the call to `AddComposers()` we can add our `AddUIBuilder` configuration.
+To configure Umbraco UI Builder:
+
+1. Open the `Program.cs` file in your project.
+2. Locate the `CreateUmbracoBuilder()` method.
+3. Add `AddUIBuilder` before `AddComposers()`.
 
 ```csharp
 builder.CreateUmbracoBuilder()
     .AddBackOffice()
     .AddWebsite()
     .AddUIBuilder(cfg => {
-                // Apply your configuration here
+       // Apply your configuration here
     })
     .AddDeliveryApi()
     .AddComposers()
     .Build();
 ```
 
-The `AddUIBuilder` extension method accepts a single parameter, a delegate function with one of the Umbraco UI Builder configuration builder arguments. With this, you can then call the relevant fluent APIs to define your solution.
+{% hint style="info" %}
+If you want an example configuration, see the **Configure Umbraco UI Builder** section in the [Creating your First Integration](../guides/creating-your-first-integration.md) article.
+{% endhint %}
+
+The `AddUIBuilder` method accepts a delegate function, allowing you to configure your solution using fluent APIs.

15/umbraco-ui-builder/getting-started/installation.md

@@ -0,0 +1,46 @@
+---
+description: Follow the steps to install Umbraco UI Builder into your Umbraco CMS website.
+---
+
+# Installation
+
+In this article, you will learn how to install Umbraco UI Builder into your Umbraco CMS implementation.
+
+## Install via Command Line
+
+Run the following command in your web project:
+
+```sh
+dotnet add package Umbraco.UIBuilder
+```
+
+For a class library without UI elements, install:
+
+```sh
+dotnet add package Umbraco.UIBuilder.Startup
+```
+
+## Install via Visual Studio
+
+To install via Visual Studio, follow these steps:
+
+1. Open Visual Studio and load your project.
+2. Go to **Tools** -> **NuGet Package Manager** -> **Manage NuGet Packages for Solution...**
+3. Select the **Browse** tab and search for **Umbraco.UIBuilder**.
+
+![Installing Umbraco UI Builder via Visual Studio](images/installing-vs.png)
+
+4. Select a version from the **Version** drop-down based on the Umbraco CMS version you are using.
+5. Click **Install**.
+6. *[Optional]* Search for and install **Umbraco.UIBuilder.Startup** if installing without UI elements.
+7. Ensure that the package reference is added to the **.csproj** file once the installation is complete:
+
+```cs
+<ItemGroup>
+<PackageReference Include="Umbraco.UIBuilder" Version="15.0.2" />
+</ItemGroup>
+```
+
+## Installing a License
+
+For details on how to install a license, see the [Licensing](licensing-model.md#installing-your-license) article.

15/umbraco-ui-builder/installation/licensing-model.md → 15/umbraco-ui-builder/getting-started/licensing-model.md

@@ -1,18 +1,22 @@
+---
+description: Learn about licensing, including coverage, installation, and validation options.
+---
+
 # Licensing
 
-Umbraco UI Builder is a commercial product. You can run an Umbraco UI Builder unrestricted locally without the need a license. Running Umbraco UI Builder on a public domain will display a warning banner in the backoffice and will limit usage to a single editable collection. To remove these restrictions, you'll need to have a **valid license**.
+Umbraco UI Builder is a commercial product. You can use Umbraco UI Builder locally without a license. When running Umbraco UI Builder on a public domain the usage is limited to a single editable collection. To remove these restrictions, a **valid license** is required.
 
-## How does it work?
+## How Licensing Works
 
-Licenses are sold per backoffice domain and will also work on all subdomains. If you have alternative staging/qa environment domains, additional domains can be added to the license on request.
+Licenses are sold per backoffice domain and applies to all subdomains. If you have alternative staging/QA environment domains, additional domains can be added to the license on request.
 
 {% hint style="info" %}
-The licenses are not bound to a specific product version. They will work for all versions of the related product.
+The licenses are not tied to a specific product version. They work across all versions of the related product.
 {% endhint %}
 
-Let's say that you have a license configured for your domain, `mysite.com`, and you've requested two development domains, `devdomain.com` and `devdomain2.com`.
+### Example License Coverage
 
-The license will cover the following domains:
+A license for `mysite.com` and requested dev domains (`devdomain.com` and `devdomain2.com`) will cover:
 
 * `localhost`
 * `*.local`
@@ -24,14 +28,14 @@ The license will cover the following domains:
 * `www.devdomain2.com`
 
 {% hint style="info" %}
-You can have only 1 license per Umbraco installation.
+Only one license per Umbraco installation is allowed.
 {% endhint %}
 
-## What does a license cover?
+## What a License Covers?
 
 There are a few differences as to what the licenses cover:
 
-* A single license covers the installation of Umbraco UI Builder in 1 production backoffice domain, as well as in any requested development domains.
+* A single license covers the installation of Umbraco UI Builder in one production backoffice domain, as well as in any requested development domains.
 * The production domain includes **all subdomains** (e.g. `*.mysite.com`).
 * The development domains work with or without the `www` subdomain.
 * The license allows for an unlimited number of editable collections.
@@ -43,21 +47,23 @@ If you have multiple backoffice domains pointing at the same installation, you c
 This is an add-on domain for existing licenses. Refunds will not be given for this product.
 {% endhint %}
 
-## Configuring your license
+## Configuring Your License
+
+You can look at the pricing, features, and purchase a license on the [Umbraco UI Builder](https://umbraco.com/products/add-ons/ui-builder/) page. On this page, you can fill out the form with your project details and requirements. 
 
-You can look at the pricing, features, and purchase a license on the [Umbraco UI Builder](https://umbraco.com/products/add-ons/ui-builder/) page. On this page, you can fill out the form with your project details and requirements. A member of the Sales team will manage this process. In the process, you will need to provide all domains you wish to have covered by the license such as primary and staging/QA domains. You should then receive a license code to be installed in your solution.
+A member of the Sales team will manage this process. In the process, you will need to provide all domains you wish to have covered by the license such as primary and staging/QA domains. You should then receive a license code to be installed in your solution.
 
-### Add additional domains
+### Adding Additional Domains
 
 If you require to add additional domains to the license, [reach out to the sales team](https://umbraco.com/products/add-ons/ui-builder/). They will manage your request and take care of the process.
 
 ## Installing your license
 
 Once you have received your license code it needs to be installed on your site.
 
-1. Open the root directory for your project files.
+1. Open the root directory of your project files.
 2. Locate and open the `appSettings.json` file.
-3. Add your Umbraco UI builder license key to `Umbraco:Licenses:Products:Umbraco.UIBuilder`:
+3. Add your Umbraco UI builder license key under `Umbraco:Licenses:Products:Umbraco.UIBuilder`:
 
 ```json
 "Umbraco": {
@@ -75,13 +81,18 @@ You might run into issues when using a period in the product name when using env
 ```json
 "Umbraco_UIBuilder": "YOUR_LICENSE_KEY"
 ```
+
 {% endhint %}
 
-### Verify the license installation
+### Verifying the License
+
+To verify that your license is successfully installed:
 
-You can verify that your license is successfully installed by logging into your project's backoffice and navigating to the settings section. Here you will see a license dashboard which should display the status of your license.
+1. Log into Umbraco Backoffice.
+2. Navigate to the **Settings** > **License** dashboard.
+3. Verify the license status displayed on the dashboard.
 
-### Validating a license without an outgoing Internet connection
+### Validating a License Without an Internet connection
 
 Some Umbraco installations will have a highly locked down production environment, with firewall rules that prevent outgoing HTTP requests. This will interfere with the normal process of license validation.
 

15/umbraco-ui-builder/getting-started/requirements.md

@@ -0,0 +1,28 @@
+---
+description: >-
+  Get started with Umbraco UI Builder by understanding its system requirements, 
+  versioning, and installation prerequisites.
+---
+
+# Requirements
+
+In this article, you will find the requirements to get started with Umbraco UI Builder. Umbraco UI Builder allows you to create and manage custom UI elements for your Umbraco backoffice.
+
+## Prerequisites
+
+* Umbraco 15+ website configured and ready to install Umbraco UI Builder.
+
+{% hint style="info" %}
+For instructions on installing Umbraco, see the [Umbraco CMS Documentation](https://docs.umbraco.com/umbraco-cms/fundamentals/setup/install).
+{% endhint %}
+
+## System Requirements
+
+To use Umbraco UI Builder, your setup must meet these minimum requirements:
+
+* **Umbraco CMS version 15+**
+* **SQL Server Database** (SQLite is acceptable for testing but not recommended for live deployments)
+
+## Versioning
+
+Umbraco UI Builder is an add-on product for Umbraco CMS, and follows the [versioning strategy laid out for Umbraco CMS](https://umbraco.com/products/knowledge-center/versioning-and-release-cadence/).

15/umbraco-ui-builder/getting-started/user-interface.md

@@ -1,34 +1,61 @@
 ---
-description: Key User Interface Concepts used by Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Key User Interface Concepts used by Umbraco UI Builder.
 ---
 
 # User Interface
 
-Before you get to know Umbraco UI Builder, you need to become familiar with the Umbraco UI and a few of its concepts. This is because Umbraco UI Builder reuses these same concepts for constructing its UI.
+Before diving into Umbraco UI Builder, it’s important to understand some of the fundamental concepts of the Umbraco UI. This knowledge will help you navigate and leverage the UI Builder more effectively, as it uses the same UI components to construct interfaces.
 
-![Sections, Trees, and Dashboards](../images/ui_01.png)
+## Section
 
-**1. Section** A distinct area of the Umbraco backoffice.
-**2. Tree** A hierarchical structure to help organize a section.  
-**3. Dashboard** An intro screen for a section, usually with useful links for that section.  
+A section in Umbraco is a distinct area within the backoffice where related content and functionality are grouped. For example, the Content section is where content management happens, while the Media section handles media files.
 
-![List View](../images/ui_02.png)
+![Section View](images/section.png)
 
-**4. List View** A list-based view of items in a tree node.
+## Tree
 
-![Editor](../images/ui_03.png)
+The tree represents the hierarchical structure of items within a section. It organizes content, settings, and data, for quick navigation and locating items. For example, the content tree shows the pages of a website in a nested format.
 
-**5. Editor** The main content editing area is made up of tabs, fieldsets, and fields.
+![Tree View](images/tree.png)
 
-![Context Apps and Tabs](../images/ui_06.png)
+## Dashboard
 
-**6. Context Apps** A contextual section of a given editor UI.
-**7. Tabs** A tabbed container of content.
+Each section in the Umbraco backoffice typically starts with a dashboard. This is an introductory screen for the section. It often includes useful links or shortcuts, providing an overview or quick access to the most commonly used features.
 
-![Menu Item](../images/ui_04.png)
+![Dashboard View](images/dashboard.png)
 
-**8. Menu Item** A context menu item + action.
+## Collection
 
-![Bulk Action](../images/ui_05.png)
+The collection displays a list of items in a tree or grid view. It provides an overview of content or data in a table format, with sortable columns and the option to filter or search through the items. This view is used when you need to work with multiple items at once.
 
-**9. Bulk Action** An action to perform on multiple list view items at once.
+![Collection View](images/ui_02.png)
+
+## Editor
+
+The editor is where the main content editing occurs. It is structured using tabs, fieldsets, and fields. Tabs organize different sections of content, and fieldsets group related fields together. Each field represents a specific piece of data, such as a text box or an image upload.
+
+![Editor](images/ui_03.png)
+
+## Workspace Views
+
+Workspace Views are additional functionality that can be added to an editor. They provide extra features based on the content of the item being edited. For instance, a media content app might allow you to resize or crop an image directly from the editor.
+
+![Workspace Views](images/workspace-views.png)
+
+## Tabs
+
+Tabs are used to organize content within the editor, allowing users to switch between different sections of a content item. For example, one tab might contain the general settings, while another contains media or advanced options.
+
+![Tabs](images/tabs.png)
+
+## Menu Item
+
+A menu item represents an action within the context of a tree node or a list item. It is a clickable item that triggers specific tasks, such as deleting or editing an item.
+
+![Menu Item](images/ui_04.png)
+
+## Bulk Action
+
+Bulk actions allow you to perform an operation on multiple items in the list view at once. For example, you might use a bulk action to delete multiple content items or update their status in a single step.
+
+![Bulk Action](images/ui_05.png)