ExFace · Thomas-Ressel-92 · Mar 18, 2025 · Mar 20, 2025 · Mar 31, 2025 · May 12, 2025
diff --git a/...als/BookClub_walkthrough/08_Using_custom_widgets_and_data_types_in_the_model.md b/...als/BookClub_walkthrough/08_Using_custom_widgets_and_data_types_in_the_model.md
@@ -1,3 +1,7 @@
 # Using custom widget and data types in the model
 
+TODO
+
+[Click here to get to the second PowerUI Tutorial 'Stock Overview'](../Stock_Overview/english/index.md)
+
 [<kbd> <br> BookClub tutorial <br> </kbd>](index.md) [<kbd> <br>< Previous <br> </kbd>](07_CRUD_UIs_for_complex_objects.md) [<kbd> <br>Next > <br> </kbd>](07_CRUD_UIs_for_complex_objects.md)
diff --git a/Docs/Tutorials/Stock_Overview/Images/02_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/02_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/03_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/03_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/03_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/03_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/03_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/03_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/03_Image_4.png b/Docs/Tutorials/Stock_Overview/Images/03_Image_4.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/03_Image_5.png b/Docs/Tutorials/Stock_Overview/Images/03_Image_5.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/03_Image_6.png b/Docs/Tutorials/Stock_Overview/Images/03_Image_6.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/03_Image_7.png b/Docs/Tutorials/Stock_Overview/Images/03_Image_7.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/04_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/04_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/04_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/04_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/04_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/04_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/04_Image_4.png b/Docs/Tutorials/Stock_Overview/Images/04_Image_4.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/04_Image_5.png b/Docs/Tutorials/Stock_Overview/Images/04_Image_5.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/04_Image_6.png b/Docs/Tutorials/Stock_Overview/Images/04_Image_6.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/04_Image_7.png b/Docs/Tutorials/Stock_Overview/Images/04_Image_7.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/05_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/05_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/05_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/05_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/05_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/05_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/05_Image_4.png b/Docs/Tutorials/Stock_Overview/Images/05_Image_4.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/05_Image_5.png b/Docs/Tutorials/Stock_Overview/Images/05_Image_5.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/05_Image_6.png b/Docs/Tutorials/Stock_Overview/Images/05_Image_6.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_10.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_10.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_11.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_11.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_12.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_12.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_13.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_13.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_14.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_14.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_15.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_15.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_16.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_16.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_17.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_17.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_18.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_18.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_19.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_19.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_20.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_20.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_4.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_4.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_5.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_5.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_6.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_6.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_7.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_7.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_8.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_8.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/06_Image_9.png b/Docs/Tutorials/Stock_Overview/Images/06_Image_9.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_10.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_10.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_11.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_11.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_4.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_4.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_5.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_5.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_6.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_6.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_7.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_7.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_8.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_8.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/07_Image_9.png b/Docs/Tutorials/Stock_Overview/Images/07_Image_9.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/08_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/08_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/08_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/08_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/08_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/08_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/08_Image_4.png b/Docs/Tutorials/Stock_Overview/Images/08_Image_4.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/08_Image_5.png b/Docs/Tutorials/Stock_Overview/Images/08_Image_5.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/09_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/09_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/09_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/09_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/09_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/09_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/10_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/10_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/10_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/10_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/10_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/10_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/11_Image_1.png b/Docs/Tutorials/Stock_Overview/Images/11_Image_1.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/11_Image_2.png b/Docs/Tutorials/Stock_Overview/Images/11_Image_2.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/11_Image_3.png b/Docs/Tutorials/Stock_Overview/Images/11_Image_3.png
diff --git a/Docs/Tutorials/Stock_Overview/Images/11_Image_4.png b/Docs/Tutorials/Stock_Overview/Images/11_Image_4.png
diff --git a/Docs/Tutorials/Stock_Overview/english/01_What_to_expect_from_this_tutorial.md b/Docs/Tutorials/Stock_Overview/english/01_What_to_expect_from_this_tutorial.md
@@ -0,0 +1,45 @@
+## What to expect from this tutorial
+
+[<kbd> <br> Stock Overview <br> </kbd>](index.md) <kbd> <br>< Previous <br> </kbd> [<kbd> <br>Next > <br> </kbd>](02_Understanding_the_data_tables_we_will_work_with.md)
+
+
+In this tutorial, you will learn some fundamental basics for the elements PowerUI offers GUI designers. It’s recommended to read the theoretical information pages and the documentation in the 4D1 Wiki. This tutorial requires access to the PowerUI Spielwiese: [Home](https://sdrexf2.salt-solutions.de/powerui-spielwiese/)
+
+**This tutorial will not:**  
+- Explain every aspect in great detail; that’s what the Wiki pages are for.  
+- Show you how PowerUI is programmed, we will not cover the core devs tasks (PHP etc.).  
+- Teach you knowledge of databases, how they work, or train you in SQL.  
+
+**What this tutorial will do:**  
+- Show you a few more PowerUI elements than the BookClub Tutorial did.  
+- Explain in a bit more detail how these elements are connected.  
+- Give you practical exercises to create or adjust a page.  
+- Will ask you questions here and there to activate your own thought process.  
+
+The goal is to train your transfer knowledge and to show you a few more functionalities so you can recreate them, no matter what the actual input for your task is.  
+
+---
+
+### Things to do before starting the PowerUI Tutorial: Stock Overview
+
+Before starting the PowerUI Tutorial: Stock Overview, make sure you have successfully finished the BookClub Tutorial. The two tutorials aren’t based on the same database, but the BookClub Tutorial establishes the basic information for data sources and data connections. Additionally, in the BookClub tutorial you will have handled some SQL – while this tutorial already has a database you won’t modify, you will need some basic SELECT statements to understand the relations between several tables.  
+
+You need to have downloaded SQL Server Management Studio and have a functional connection to swusqllogbase.salt-solutions.de.  
+
+The goal is to get to know more functions for PowerUI – hence, this tutorial will introduce more elements for building a graphic user interface.  
+
+Mainly the following:  
+- Create a page  
+- Create and edit buttons (actions)  
+- Table relations: Attributes and columns  
+- Table relations: Filters  
+- Sorters  
+- Rinse & Repeat: Relations, attributes, columns and filters  
+- Interacting tables  
+- Behaviors  
+
+---
+
+What’s the goal for the page you will create? It’s to practice implementing some more PowerUI elements and understand how they all work together. It’s advised to read these pages [Grundlegende Begriffe - 4D1 Projektwikis - Confluence](https://asgixpo.atlassian.net/wiki/spaces/4d1prjwikis/pages/966164529/Grundlegende+Begriffe) if you don’t know what to do in this tutorial at any step. The info-pages were created alongside the tutorial, so they should cover all necessary explanations to follow through with the tutorial's instructions.  
+
+[<kbd> <br> Stock Overview <br> </kbd>](index.md) <kbd> <br>< Previous <br> </kbd> [<kbd> <br>Next > <br> </kbd>](02_Understanding_the_data_tables_we_will_work_with.md)
diff --git a/...ls/Stock_Overview/english/02_Understanding_the_data_tables_we_will_work_with.md b/...ls/Stock_Overview/english/02_Understanding_the_data_tables_we_will_work_with.md
@@ -0,0 +1,67 @@
+## Understanding the data tables we’ll work with
+
+[<kbd> <br> Stock Overview <br> </kbd>](index.md) [<kbd> <br>< Previous <br> </kbd>](01_What_to_expect_from_this_tutorial.md) [<kbd> <br>Next > <br> </kbd>](03_create_a_page.md)
+
+We’ll be working with several tables in this tutorial. Tables that already exist in a database. It’s not necessary to know all the tables and their attributes to follow the tutorial but if you want to understand better why the following tables were chosen, you can view them under:
+
+1. `Administration > Metamodel > Connections > Select “PowerUI_SQL_Spielewiese auf swusqllogbase” > Click SQL admin and log in.`  
+
+2. Or: Open your **SQL Server Management Studio** and log onto the `swusqllogbase.salt-solutions.de` server. Find the table **PowerUI_SQL_spielewiese**.
+
+Here you can see **ALL** the tables in the database. This database is a copy of the Logbase Mahle project as a playground for this tutorial.
+
+We will use the following tables and their attributes:
+
+- Quant  
+- StorageBin  
+- StorageArea  
+- MaterialMaster  
+- WarehousePosting  
+
+Understanding the actual data in this tutorial will help you to understand why we’re connecting which tables. Knowing the concepts of primary and foreign keys is important – so if you have never heard of it, or feel like you need a touch up on the concepts, you can read up on them here:  
+[Difference between Primary Key and Foreign Key - GeeksforGeeks](https://www.geeksforgeeks.org/difference-between-primary-key-and-foreign-key/)
+
+---
+
+For your first task, you’ll have to create a visual for the 5 tables above. Ideally, you can use Visual Studio or any other software to create a diagram with – or use a pen and paper to sketch out the relations. You will:
+
+> Create a database schema diagram for a Warehouse Management System with the following components. You'll need to identify entities, attributes, primary keys, foreign keys, and relationships between tables.
+
+### Task
+
+1. Open, as mentioned above, either the **SQL Adminer** or your **SQL Server Management Studio** and find the database.  
+2. Design a database schema with the following entities:  
+   - Quant  
+   - StorageBin  
+   - StorageArea  
+   - MaterialMaster  
+   - WarehousePosting  
+3. For each entity, determine:  
+   - Appropriate attributes  
+   - Primary key(s)  
+   - Foreign key(s) where applicable  
+   - Relationships between entities (one‑to‑many, many‑to‑many, etc.)  
+
+Your schema should address the following business rules:
+
+- Materials are stored in storage bins  
+- Storage bins belong to storage areas  
+- Quantities of materials (quants) are tracked in specific storage bins  
+- Warehouse postings record movements between storage bins  
+
+**Hint for the structure:**
+
+- Identify primary keys (denoted with **PK**)  
+- Identify foreign keys (denoted with **FK**)  
+- Draw relationships between tables using appropriate notation  
+- Consider cardinality in your relationships (1:1, 1:N, N:M)  
+
+---
+
+### Solution
+
+![Solution](../Images/02_Image_1.png)
+
+If your solution is a lot bigger and contains a lot more attributes than the picture above shows – you’ve done it correctly. The goal for this exercise was for you to look at the data tables more closely – which tables have which attributes? We’ll be needing only the ones in the picture above for the rest of this particular tutorial, we will circle back in other tutorials later on.
+
+[<kbd> <br> Stock Overview <br> </kbd>](index.md) [<kbd> <br>< Previous <br> </kbd>](01_What_to_expect_from_this_tutorial.md) [<kbd> <br>Next > <br> </kbd>](03_create_a_page.md)
diff --git a/Docs/Tutorials/Stock_Overview/english/03_create_a_page.md b/Docs/Tutorials/Stock_Overview/english/03_create_a_page.md
@@ -0,0 +1,75 @@
+## Create a page 
+
+[<kbd> <br> Stock Overview <br> </kbd>](index.md) [<kbd> <br>< Previous <br> </kbd>](02_Understanding_the_data_tables_we_will_work_with.md) [<kbd> <br>Next > <br> </kbd>](04_create_and_edit_buttons_actions.md)
+
+You will not create a new App or data base. You will work with the ones already set up for the tutorial. You will create pages the same way you did in the BookClub Tutorial.
+
+### Task
+
+Navigate to `Administration > Pages` &nbsp;> Click on **Home** and look for the page named **„LogBase PUI Tutorial“**.
+
+![Main Page](../Images/03_Image_1.png)
+
+That’s the main page for this tutorial. It holds the navigation tiles (click **Open Page** to see them). Underneath you’ll find several pages:  
+
+1. Stock Overview Blueprint, Warehouse Order Blueprint and Material Master Blueprint. These are the example pages which showcase the end of a tutorial – once you’ve followed all the steps, your page should look like them. **This tutorial will only cover the Stock Overview Blueprint page.**
+2. Tutorial Trial Pages: If you ever want to try something without it impacting your tutorial progress, you can try that here. There’s no “undo” button in the PowerUI editors, so changing something should be done consciously. 
+
+All additional pages for this tutorial go under this one. It doesn’t matter what you name your page, just make sure you’re able to identify which one is yours. You can use your SALT abbreviation.
+
+![Additional Pages](../Images/03_Image_2.png)
+
+---
+
+### Task
+
+1. **Click** the **„New“** button. Either click on **“PUI Tutorial: Stock Overview Blueprint”** and then **“New”** to assign it as the new page’s parent page, or choose your parent page manually in the **Page Properties**.
+2. Give your tutorial page a name: **LogBase PUI Tutorial <dein Kuerzel>**
+3. Check that the **Template** is set to **SAP Fiori 3**. SAP Fiori 3 is a certain design developed by SAP. We will use it for this tutorial but there are different designs as well.
+4. Check that **„Is part of app“** is set to **LogBase Demo (Mahle)**. In this tutorial, the app we work with is **LogBase Demo (Mahle)** and we’ll only be using this. Generally, though, you’ll use different apps for different projects or modules.
+5. Check that **„In menu“** is checked, while **„Published“** is *not*. This sets your page as part of the pages menu structure but doesn’t publish it to access it outside of Administration. You can publish it once you’ve finished this tutorial.
+
+![New Page](../Images/03_Image_3.png)
+
+
+6. Switch to the „Widget“ tab
+7. Press the **„Use a preset for a quick start“** magic wand. We will choose a basic preset to give our page a basic structure, just like you’ve done in the BookClub Tutorial.
+
+![Magic Wand](../Images/03_Image_4.png)
+
+8. Search **„Master data“** and select the preset. On the bottom‑right you can see the PowerUI (UXON) structure already as a preview. Click **„Replace“**.
+
+> **Fun Fact:** You can’t do anything wrong in this step. You’re just choosing your preset and you’re replacing what’s written in your page editor with the button **“Replace”**.
+
+![Replace](../Images/03_Image_5.png)
+
+![Widget](../Images/03_Image_6.png)
+
+---
+
+Now you have a basic page structure in your widget editor. The highest level of the pages hierarchy is Content. It contains the basic widget type for your page, in this case a data table because a table is what we want to showcase, and the object_alias. 
+
+The **object_alias** is the reference to an object, hence to a data table that’s located in our data base. Basically, the **object_alias** tells PowerUI: „There’s a table with columns and rows, and data, and its name is <Example> and here’s an alias so you can reference it and know which app it belongs to.“ Without an object_alias PowerUI can’t build your page as it simply doesn’t know what you want. 
+
+For more information on a general structure of a page, look here: [Struktur einer Page - 4D1 Projektwikis - Confluence](https://asgixpo.atlassian.net/wiki/spaces/4d1prjwikis/pages/968261637/Struktur+einer+Page)
+
+To assign an `object_alias` you always need to know:
+
+- **Which app** does the object I want to use for my page belong to? In this tutorial it’s always **logbase.DemoM** (the alias of the app).
+- **Which object** do I want to use? Since the objects are the tables in our database, you always want to know your data before building a page.
+- **What’s the object’s alias?** As you need to know how to reference the object you want. To check an object’s name, alias, attributes or app, you can view them under `Administration > Metamodel > Objects`.
+
+As we’re working with the widget **DataTable** to show a data table on our page, we have to set the values for the other properties that such a table has – namely, **columns** and **buttons**, as you can see in the preset. For more details on buttons, click [here](https://asgixpo.atlassian.net/wiki/spaces/4d1prjwikis/pages/971964422/Actions+Events+Behaviors).
+
+Otherwise, let’s move on to the buttons you will create and edit. So, for now: your `object_alias` for the main widget of this page follows the **AppAlias.ObjectAlias** format:
+
+**Logbase.DemoM.Quant:** Quant is the name of the table we’ll be working with first. 
+
+9. Set the value of your object_alias to logbase.DemoM.Quant.
+10. Click save and open your page via the Open Page button. 
+
+It should look like this:
+
+![Quant](../Images/03_Image_7.png)
+
+[<kbd> <br> Stock Overview <br> </kbd>](index.md) [<kbd> <br>< Previous <br> </kbd>](02_Understanding_the_data_tables_we_will_work_with.md) [<kbd> <br>Next > <br> </kbd>](04_create_and_edit_buttons_actions.md)