update with data editor alias and razor examples

Author: madsrasmussen

17/umbraco-cms/customizing/property-editors/composition/property-editor-data-source.md

@@ -9,6 +9,7 @@ Data Sources are an opt-in feature for a Property Editor UI and need to be expli
 The Data Source support is enabled in the Property Editor UI manifest. Below is a snippet showing how to enable it. The `forDataSourceTypes` can include any already existing Data Source Types or new custom ones.
 
 **Property Editor UI Manifest**
+
 ```typescript
 {
   type: 'propertyEditorUi',
@@ -18,7 +19,7 @@ The Data Source support is enabled in the Property Editor UI manifest. Below is
     //... more
     supportsDataSource: {
       enabled: true,
-      forDataSourceTypes: ['myDataSourceType']
+      forDataSourceTypes: ['My.DataSourceType.Custom']
     }
   }
 }
@@ -28,16 +29,17 @@ When this field is enabled, it will be possible to pick a Data Source in the Dat
 
 <figure><img src="../.gitbook/assets/umbraco-docs-data-type-property-editor-data-source.png" alt=""><figcaption><p>Property Editor Data Source Picker</p></figcaption></figure>
 
-## Register a Data Source
+## Register a Property Editor Data Source
 
 **Data Source Manifest**
+
 ```typescript
  {
   type: 'propertyEditorDataSource',
-  dataSourceType: 'myDataSourceType'
-  alias: 'Umb.PropertyEditorDataSource.MyDataSource',
-  name: 'My Data Data Source',
-  api: () => import('./my-data-data-source.js'),
+  dataSourceType: 'My.DataSourceType.Custom',
+  alias: 'Umb.PropertyEditorDataSource.MyCustomDataSource',
+  name: 'My Custom Data Source',
+  api: () => import('./my-custom-data-source.js'),
   meta: {
    label: 'My Data',
    description: 'A good description of the data',
@@ -47,13 +49,15 @@ When this field is enabled, it will be possible to pick a Data Source in the Dat
 ```
 
 ### Data Source Settings
+
 Like Property Editor UIs and Schemas, Data Sources can have settings for configuration of the data source. These settings are defined in the manifest under `meta.settings`. The settings for a Data Source will be rendered in the Data Type Workspace together with the Property Editor UI and Schema settings.
 
 **Data Source Manifest**
+
 ```typescript
 {
   type: 'propertyEditorDataSource',
-  alias: 'Umb.PropertyEditorDataSource.MyDataSource',
+  alias: 'Umb.PropertyEditorDataSource.MyCustomDataSource',
   //... more
   meta: {
     //... more
@@ -70,13 +74,14 @@ When implementing a Property Editor UI element, the Data Source alias can be acc
 
 ```typescript
 interface UmbPropertyEditorUiElement extends HTMLElement {
-  dataSourceAlias?: string;
+    dataSourceAlias?: string;
 }
 ```
 
 ## Access Data Source Config in Property Editor UI
+
 The Data Source configuration can be accessed through the `config` property of the Property Editor UI element together with the UI and Schema config.
 
 ## Built-in Data Source Types
-* [picker](../property-editor-data-source-types/picker.md) - Used by Property Editors that pick entities, e.g. the Entity Data Picker Property Editor.
 
+-   [Picker](../data-source-types/picker/README.md) - Used by Property Editors that pick entities, e.g. the Entity Data Picker Property Editor.

17/umbraco-cms/customizing/property-editors/data-source-types/picker/README.md

@@ -0,0 +1,27 @@
+# Picker Data Source Type
+
+The `Umb.DataSourceType.Picker` Data Source Type is used by Property Editors that pick entities, e.g. the built-in [Entity Data Picker Property Editor](../../../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/entity-data-picker.md).
+
+## Register a Picker Data Source
+
+**Data Source Manifest**
+
+```typescript
+{
+  type: 'propertyEditorDataSource',
+  dataSourceType: 'Umb.DataSourceType.Picker',
+  alias: 'Umb.PropertyEditorDataSource.MyPickerDataSource',
+  name: 'My Picker Data Source',
+  api: () => import('./my-picker-data-source.js'),
+  meta: {
+   label: 'My Data Source',
+   description: 'A good description of the data source',
+   icon: 'icon-database',
+  },
+},
+```
+
+The new Picker supports two types of data structures:
+
+-   [Collection Data](./picker-collection-data-source.md)
+-   [Tree Data](./picker-tree-data-source.md)

17/umbraco-cms/customizing/property-editors/property-editor-data-source-types/picker-collection-data-source.md renamed to 17/umbraco-cms/customizing/property-editors/data-source-types/picker/picker-collection-data-source.md

@@ -1,43 +1,75 @@
 # Entity Data Picker
 
-`Schema Alias: Umbraco.Plain.Json` // TODO: update when alias is final
+`Schema Alias: Umbraco.EntityDataPicker`
 
 `UI Alias: Umb.PropertyEditorUi.EntityDataPicker`
 
-`Returns: IEnumerable<string>`
+`Returns: Umbraco.Cms.Core.Models.EntityDataPickerValue`
 
-`Supported Data Source Types:` [picker](../../../../customizing/property-editors/property-editor-data-source-types/README.md)
+`Supported Data Source Types:` [picker](../../../../customizing/property-editors/data-source-types/picker/README.md)
 
 The Entity Data Picker property editor allows editors to pick one or more entities from a configurable data source. The selected entities are stored as an array of strings, where each string represents the ID of the selected entity.
 
 ### With Models Builder
 
-```csharp
-@if(Model.MyDataItems.Any()){
-  <ul>
-    @foreach(var item in Model.MyDataItems){
-      <li>@item</li>
-    }
-  </ul>
+```razor
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<EntityDataPickerTest>
+@{
+    Layout = null;
 }
+<html lang="en">
+<head>
+    <title>Entity Data Picker</title>
+</head>
+<body>
+@if (Model.MyEntityPicker is null)
+{
+    <p>No entity picker value found</p>
+}
+else
+{
+    <p>Data source: <strong>@Model.MyEntityPicker.DataSource</strong></p>
+    <p>Picked IDs:</p>
+    <ul>
+        @foreach (string id in Model.MyEntityPicker.Ids)
+        {
+            <li>@id</li>
+        }
+    </ul>
+}
+</body>
+</html>
 ```
 
 ### Without Models Builder
 
-```csharp
-@if(Model.HasValue("MyDataItems"))
+```razor
+@using Umbraco.Cms.Core.Models
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
+@{
+    Layout = null;
+    var entityDataPickerValue = Model.Value<EntityDataPickerValue>("myEntityPicker");
+}
+<html lang="en">
+<head>
+    <title>Entity Data Picker</title>
+</head>
+<body>
+@if (entityDataPickerValue is null)
 {
- var myDataItems = Model.Value<IEnumerable<string>>("MyDataItems");
-  <ul>
-    @foreach(var item in myDataItems)
-    {
-      <li>@item</li>
-    }
-  </ul>
+    <p>No entity picker value found</p>
 }
-```
-
-### Content Delivery API
-```json
-// Missing example
+else
+{
+    <p>Data source: <strong>@entityDataPickerValue.DataSource</strong></p>
+    <p>Picked IDs:</p>
+    <ul>
+        @foreach (string id in @entityDataPickerValue.Ids)
+        {
+            <li>@id</li>
+        }
+    </ul>
+}
+</body>
+</html>
 ```