diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/adding-new-graph.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/adding-new-graph.png new file mode 100644 index 000000000..3cc200dd5 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/adding-new-graph.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/bke-select-graph.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/bke-select-graph.png new file mode 100644 index 000000000..33b31faeb Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/bke-select-graph.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/classes.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/classes.png new file mode 100644 index 000000000..651755240 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/classes.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/create-ontology-graph.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/create-ontology-graph.png new file mode 100644 index 000000000..54d288511 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/create-ontology-graph.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/datatype-range-not-supported.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/datatype-range-not-supported.png new file mode 100644 index 000000000..2863d3203 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/datatype-range-not-supported.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/diagram_product_expert.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/diagram_product_expert.png new file mode 100644 index 000000000..2aa07ee13 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/diagram_product_expert.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/drag-drop-new-class.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/drag-drop-new-class.png new file mode 100644 index 000000000..c52278f04 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/drag-drop-new-class.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/edge-type.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/edge-type.png new file mode 100644 index 000000000..5e0abf666 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/edge-type.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/expert-class.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/expert-class.png new file mode 100644 index 000000000..217ec3f70 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/expert-class.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/expert-in-form.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/expert-in-form.png new file mode 100644 index 000000000..28eaf68f0 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/expert-in-form.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/explore-bke.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/explore-bke.png new file mode 100644 index 000000000..de97e1b6f Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/explore-bke.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/explore-kgs.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/explore-kgs.png new file mode 100644 index 000000000..600372ed6 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/explore-kgs.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/form-product.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/form-product.png new file mode 100644 index 000000000..355eb9f2d Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/form-product.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/form-property.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/form-property.png new file mode 100644 index 000000000..e8366531f Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/form-property.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/index.md b/docs/explore-and-author/bke-module/visually-authoring-ontologies/index.md new file mode 100644 index 000000000..9b187482c --- /dev/null +++ b/docs/explore-and-author/bke-module/visually-authoring-ontologies/index.md @@ -0,0 +1,190 @@ +--- +icon: material/cog-outline +subtitle: using Business Knowledge Editor interface +tags: + - BeginnersTutorial + - Vocabulary +--- +# Visually Authoring Ontologies + +## Introduction + +This beginner-level tutorial shows how to use Business Knowledge Editor to visually create new ontology (vocabulary) **classes** and **properties** (object properties and datatype properties). + +There are other ways to create new classes and properties in Corporate Memory, for example by using SHACL shapes. Business Knowledge Editor provides an intuitive diagram-based approach that simplifies this process. + +The tutorial consists of the following steps, which are described in detail below: + +1. Initialize a new ontology +2. Open a new Business Knowledge Editor visualization +3. Create classes +4. Link related classes through an object property +5. Add data properties +6. Save the changes + +## Class Diagram + +This tutorial uses the following example ontology: + +![](diagram_product_expert.png) + +Two classes are related through an `expertIn` object property. + +Each class will have its own data property. + +--- + +## 1 Initializing a new ontology + +The classes and properties created in this tutorial are stored in a knowledge graph. For this tutorial, create a new ontology graph. + +!!! info + + You can also extend an existing vocabulary. In that case, continue with step 2. + +To create a new ontology graph: + +1. In Corporate Memory, click **Knowledge graphs** under **EXPLORE** in the navigation on the left side of the page. + + ![](explore-kgs.png){ class="bordered" width="50%" } + +2. In the **Graphs** drop-down menu, click the **(+)** button and select **New Ontology (owl:Ontology)**. + + ![](adding-new-graph.png){ class="bordered" width="50%" } ![](create-ontology-graph.png){ class="bordered" width="50%" } + +3. Define a **Name** and a **Graph URI** for the ontology. In this example, use: + - Label: `Custom Dprod` + - Graph URI: `http://ld.company.org/custom-dprod/` + +--- + +## 2 Opening a new Business Knowledge Editor visualization + +1. In Corporate Memory, click **Business Knowledge Editor** under **EXPLORE** in the navigation on the left side of the page. + + ![](explore-bke.png){ class="bordered" width="50%" } + +2. Select the target graph using the drop-down menu. + + ![](bke-select-graph.png){ class="bordered" width="50%" } + +3. Create a new empty visualization. + +!!! success + + If you see an empty canvas, you are ready to use Business Knowledge Editor to create classes and properties. + +--- + +## 3 Creating classes + +New elements can be created from the entries listed in **Classes** on the left side of the canvas. + +1. Drag and drop **Class** from the bottom left list into the canvas. + + ![](classes.png){ class="bordered" width="50%" } + +!!! info + + If you do not see **Class** in the first entries, use the search bar to find it. + +2. Click the newly created **Untitled (Class)** in the canvas to bring up a form on the right side. + + ![](untitled-class.png){ class="bordered" width="50%" } + +3. Fill out the required fields and any optional fields you want to define for the class. + + ![](expert-class.png){ class="bordered" width="50%" } + +--- + +## 4 Linking related classes through object properties + +1. Drag and drop **owl:ObjectProperty** from the bottom left list into the canvas. + + !!! info + + If you do not see **owl:ObjectProperty** in the first entries, use the search bar to find it. + +2. Click the newly created **Untitled (Object Property)** in the canvas to bring up a form on the right side. + +3. Fill out the required fields and any optional fields you want to define for the object property. + + ![](expert-in-form.png){ class="bordered" width="50%" } + +4. Click and hold the connector dot at the right edge of the class to begin drawing an arrow, then connect it to the connector dot at the left edge of the object property. + + ![](pointer-click-hold.png){ class="bordered" width="50%" } + +5. In the edge type selection window that appears, select **In Domain Of**. + + ![](edge-type.png){ class="bordered" width="50%" } + + !!! info + + This is one way to associate a property with an existing class. The next step shows another option: creating a new class from an existing property. + +6. Click the right-side edge of the object property and select **Range**. This adds **New Class** on the right side. + + ![](range-created-new-class.png){ class="bordered" width="50%" } + +7. Drag and drop **New Class** into the canvas. + + ![](drag-drop-new-class.png){ class="bordered" width="50%" } + +8. Click the newly created class to open its form, then fill out the required fields and any optional fields you want to define. + + ![](form-product.png){ class="bordered" width="50%" } + +!!! success + + The property now links the two concepts through its domain and range. + +--- + +## 5 Adding data properties + +Datatype properties can be added to the canvas in the same way as object properties. + +1. Drag and drop **owl:DatatypeProperty** from the bottom left list into the canvas. + + !!! info + + If you do not see **owl:DatatypeProperty** in the first entries, use the search bar to find it. + +2. Click the newly created **Untitled (Data Property)** in the canvas to bring up a form on the right side. + +3. Fill out the required fields and any optional fields you want to define for the data property. + + ![](form-property.png){ class="bordered" width="50%" } + +4. Click and hold the connector dot at the right edge of the class to begin drawing an arrow, then connect it to the connector dot at the left edge of the data property. + +5. In the edge type selection window that appears, select **In Domain Of**. + + ![](linking-datatype-property.png){ class="bordered" width="50%" } + +!!! warning + + At the time of writing, it is not possible to set a datatype range such as a language-tagged string, float, or date directly in Business Knowledge Editor. + Save your changes, then complete the datatype definition by using the SHACL shapes approach. + + ![](datatype-range-not-supported.png){ class="bordered" width="30%" } + +## 6 Saving the changes + +Save the changes as a named visualization so you can edit your classes and properties later. + +1. Click **Save** in the upper-right corner of the canvas. + +2. In the **Graph** drop-down selector, choose your ontology (vocabulary). + +3. Enter a name for the visualization. + + ![](save-changes.png) + +4. Click **Save**. + +!!! success + + You have successfully created new concepts and properties inside your ontology using Business Knowledge Editor's canvas. diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/linking-datatype-property.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/linking-datatype-property.png new file mode 100644 index 000000000..6c1a3d60e Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/linking-datatype-property.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/pointer-click-hold.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/pointer-click-hold.png new file mode 100644 index 000000000..f6297efac Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/pointer-click-hold.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/range-created-new-class.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/range-created-new-class.png new file mode 100644 index 000000000..1277bec02 Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/range-created-new-class.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/save-changes.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/save-changes.png new file mode 100644 index 000000000..61e67ad1a Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/save-changes.png differ diff --git a/docs/explore-and-author/bke-module/visually-authoring-ontologies/untitled-class.png b/docs/explore-and-author/bke-module/visually-authoring-ontologies/untitled-class.png new file mode 100644 index 000000000..248a1f1fb Binary files /dev/null and b/docs/explore-and-author/bke-module/visually-authoring-ontologies/untitled-class.png differ