From 5c23de889ee40c3fe402c8f1619f9e939ecb8ef7 Mon Sep 17 00:00:00 2001 From: OpenUI5 Bot Date: Thu, 19 Oct 2023 08:28:47 +0000 Subject: [PATCH] OpenUI5 Documentation Update 19.10.2023 --- docs/0index.md | 2 +- ...Forms_Which_One_Should_I_Choose_d1d8eb0.md | 343 ++++++++++++++++++ ...youts_Which_One_Should_I_Choose_d1d8eb0.md | 258 ------------- docs/More_About_Controls_3ec6808.md | 6 +- docs/Step_25_Remote_OData_Service_4406244.md | 2 +- docs/Step_25_Remote_OData_Service_b68d321.md | 2 +- ...g_from_Content_Delivery_Network_2d3eb2f.md | 2 +- docs/index.json | 4 +- docs/index.md | 2 +- docs/sidebar.md | 2 +- 10 files changed, 355 insertions(+), 268 deletions(-) create mode 100644 docs/Forms_Which_One_Should_I_Choose_d1d8eb0.md delete mode 100644 docs/Layouts_Which_One_Should_I_Choose_d1d8eb0.md diff --git a/docs/0index.md b/docs/0index.md index 97786cc6..fbcad7b4 100644 --- a/docs/0index.md +++ b/docs/0index.md @@ -791,7 +791,7 @@ OpenUI5 Version for the OpenUI5 Demo Kit - [Semantic Page \(sap.f\)](Semantic_Page_sap_f_47dc868.md) - [Semantic Page \(sap.m\)](Semantic_Page_sap_m_4a97a07.md) - [Tables: Which One Should I Choose?](Tables_Which_One_Should_I_Choose_148892f.md) - - [Layouts: Which One Should I Choose?](Layouts_Which_One_Should_I_Choose_d1d8eb0.md) + - [Forms: Which One Should I Choose?](Forms_Which_One_Should_I_Choose_d1d8eb0.md) - [sap.f](sap_f_0b455b0.md) - [Building an App with the Flexible Column Layout and Related Classes](Building_an_App_with_the_Flexible_Column_Layout_and_Related_Classes_59a0e11.md) - [Flexible Column Layout](Flexible_Column_Layout_2abdefb.md) diff --git a/docs/Forms_Which_One_Should_I_Choose_d1d8eb0.md b/docs/Forms_Which_One_Should_I_Choose_d1d8eb0.md new file mode 100644 index 00000000..76b58238 --- /dev/null +++ b/docs/Forms_Which_One_Should_I_Choose_d1d8eb0.md @@ -0,0 +1,343 @@ + + +| loio | +| -----| +| d1d8eb099d714566becf0af75697d073 | + +
+ +view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/d1d8eb099d714566becf0af75697d073) | [demo kit latest release](https://sdk.openui5.org/topic/d1d8eb099d714566becf0af75697d073)
+ +## Forms: Which One Should I Choose? + +To display and edit data in a form, OpenUI5 offers various form controls that are suitable for different use cases. This documentation outlines which form controls are available, and what features are supported by each one. + +The following table gives an overview of form controls and their usage: + +**Overview of Form Controls and Supported Features** + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +Form [\(`sap.ui.layout.form.Form`\)](https://sdk.openui5.org/api/sap.ui.layout.form.Form) + + + + + +Simple Form [\(`sap.ui.layout.form.SimpleForm`\)](https://sdk.openui5.org/api/sap.ui.layout.form.SimpleForm) + + + + + +Smart Form [\(`sap.ui.comp.smartform.SmartForm`\)](https://sdk.openui5.org/api/sap.ui.comp.smartform.SmartForm) + + + +
+ +Flexibility + + + + + +1 + + + + + +3 + + + + + +2 + + + +
+ +Complexity + + + + + +3 + + + + + +1 + + + + + +2 + + + +
+ +Performance + + + + + +1 + + + + + +3 + + + + + +2 + + + +
+ +Automatic responsive design + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + +
+ +Accessible design + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + +
+ +Controls inside are OData-bindable + + + + + +![No](images/loio5befb5af20ed42fd9052a99014d953a3_LowRes.gif) + + + + + +![No](images/loio5befb5af20ed42fd9052a99014d953a3_LowRes.gif) + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + +
+ +Enables a granular structure of a form control + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + + + +![No](images/loio5befb5af20ed42fd9052a99014d953a3_LowRes.gif) + + + + + +![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif) + + + +
+ +**Legend**: + +- Rating: + + - 1: Best suited + + - 2: Average + + - 3: Least suited + + +- ![Yes](images/loio3cb17ee88aed44d2bf1d14b97728c709_LowRes.gif): Feature is supported for this form type + +- ![No](images/loio5befb5af20ed42fd9052a99014d953a3_LowRes.gif): Feature is not supported for this form type + + +*** + + + +### Use Cases + +*** + +#### Form + +Use `sap.ui.layout.form.Form` if you want to do the following: + +- Create a highly customized form + +- Display a large amount of data in a form + +- Create complex forms with multiple sections and different types of input fields + +- Have granular control over the structure of a form + +- Manage the responsiveness of the form yourself + + +*** + +#### Simple Form + +Use `sap.ui.layout.form.SimpleForm` if you want to do the following: + +- Use a very simple structure of a form in a straightforward way + +- Create a form quickly and easily + +- Use a form that is automatically responsive + + +*** + +#### Smart Form + +Use `sap.ui.comp.smartform.SmartForm` if you want to do the following: + +- Bind a control to an OData entity within your form + +- Create and edit forms for SAP applications + +- Leverage the built-in data validation of OpenUI5 based on the OData model's metadata + +- Work with OData services and automatically generate form fields + + +*** + + + +### Recommendations + +*** + +#### Do not nest layouts and forms + +*** + +#### Do not use other forms or layout controls + +Using any other form or layout control \(for example,  `HBox`\) as children of a form can lead to issues with accessibility or the responsive design. This applies to all form controls mentioned. + diff --git a/docs/Layouts_Which_One_Should_I_Choose_d1d8eb0.md b/docs/Layouts_Which_One_Should_I_Choose_d1d8eb0.md deleted file mode 100644 index f086db68..00000000 --- a/docs/Layouts_Which_One_Should_I_Choose_d1d8eb0.md +++ /dev/null @@ -1,258 +0,0 @@ - - -| loio | -| -----| -| d1d8eb099d714566becf0af75697d073 | - -
- -view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/d1d8eb099d714566becf0af75697d073) | [demo kit latest release](https://sdk.openui5.org/topic/d1d8eb099d714566becf0af75697d073)
- -## Layouts: Which One Should I Choose? - -To display and edit data, we offer a number of form controls. - -**Form Controls and Their Usage** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -Form [\(sap.ui.layout.Form\)](https://sdk.openui5.org/api/sap.ui.layout.Form) - - - - - -Simple Form - - - - - -Smart Form - - - -
- -Flexibility - - - - - -  - - - - - -  - - - - - -  - - - -
- -Complexity - - - - - -  - - - - - -  - - - - - -  - - - -
- -Performance - - - - - -  - - - - - -  - - - - - -  - - - -
- -Automatic responsive design - - - - - -  - - - - - -  - - - - - -  - - - -
- -Accessible design - - - - - -  - - - - - -  - - - - - -  - - - -
- -Contained controls are OData-bindable - - - - - -  - - - - - -  - - - - - -  - - - -
- -Allows granular form structure control - - - - - -  - - - - - -  - - - - - -  - - - -
- diff --git a/docs/More_About_Controls_3ec6808.md b/docs/More_About_Controls_3ec6808.md index a4ded56e..47934ae5 100644 --- a/docs/More_About_Controls_3ec6808.md +++ b/docs/More_About_Controls_3ec6808.md @@ -40,8 +40,10 @@ The semantic page controls help the app designers and developers implement and c different table controls that are suitable for different use cases. The table below outlines which table controls are available, and what features are supported by each one.")** The libraries provided by OpenUI5 contain various different table controls that are suitable for different use cases. The table below outlines which table controls are available, and what features are supported by each one. -- **[Layouts: Which One Should I Choose?](Layouts_Which_One_Should_I_Choose_d1d8eb0.md "To display and edit data, we offer a number of form controls. ")** -To display and edit data, we offer a number of form controls. +- **[Forms: Which One Should I Choose?](Forms_Which_One_Should_I_Choose_d1d8eb0.md "To display and edit data in a form, OpenUI5 offers various form + controls that are suitable for different use cases. This documentation outlines which form + controls are available, and what features are supported by each one. ")** +To display and edit data in a form, OpenUI5 offers various form controls that are suitable for different use cases. This documentation outlines which form controls are available, and what features are supported by each one. - **[sap.f](sap_f_0b455b0.md "This library contains controls that were built based on the SAP Fiori 2.0 design guidelines.")** This library contains controls that were built based on the SAP Fiori 2.0 design guidelines. diff --git a/docs/Step_25_Remote_OData_Service_4406244.md b/docs/Step_25_Remote_OData_Service_4406244.md index 67fe7a8f..4502e547 100644 --- a/docs/Step_25_Remote_OData_Service_4406244.md +++ b/docs/Step_25_Remote_OData_Service_4406244.md @@ -61,7 +61,7 @@ metadata: type: application framework: name: OpenUI5 - version: "1.120.0" + version: "1.121.0" libraries: - name: sap.m - name: sap.ui.core diff --git a/docs/Step_25_Remote_OData_Service_b68d321.md b/docs/Step_25_Remote_OData_Service_b68d321.md index 5dba3fa2..f446f23a 100644 --- a/docs/Step_25_Remote_OData_Service_b68d321.md +++ b/docs/Step_25_Remote_OData_Service_b68d321.md @@ -61,7 +61,7 @@ metadata: type: application framework: name: OpenUI5 - version: "1.120.0" + version: "1.121.0" libraries: - name: sap.m - name: sap.ui.core diff --git a/docs/Variant_for_Bootstrapping_from_Content_Delivery_Network_2d3eb2f.md b/docs/Variant_for_Bootstrapping_from_Content_Delivery_Network_2d3eb2f.md index b1612e05..b9e5056d 100644 --- a/docs/Variant_for_Bootstrapping_from_Content_Delivery_Network_2d3eb2f.md +++ b/docs/Variant_for_Bootstrapping_from_Content_Delivery_Network_2d3eb2f.md @@ -33,7 +33,7 @@ The specific version allows you to select a particular fixed version for bootstr ```html diff --git a/docs/index.json b/docs/index.json index 676b3e81..e8127fcc 100644 --- a/docs/index.json +++ b/docs/index.json @@ -2606,8 +2606,8 @@ "Tables: Which One Should I Choose?": { "link": "Tables_Which_One_Should_I_Choose_148892f.md" }, - "Layouts: Which One Should I Choose?": { - "link": "Layouts_Which_One_Should_I_Choose_d1d8eb0.md" + "Forms: Which One Should I Choose?": { + "link": "Forms_Which_One_Should_I_Choose_d1d8eb0.md" }, "sap.f": { "link": "sap_f_0b455b0.md", diff --git a/docs/index.md b/docs/index.md index 97786cc6..fbcad7b4 100644 --- a/docs/index.md +++ b/docs/index.md @@ -791,7 +791,7 @@ OpenUI5 Version for the OpenUI5 Demo Kit - [Semantic Page \(sap.f\)](Semantic_Page_sap_f_47dc868.md) - [Semantic Page \(sap.m\)](Semantic_Page_sap_m_4a97a07.md) - [Tables: Which One Should I Choose?](Tables_Which_One_Should_I_Choose_148892f.md) - - [Layouts: Which One Should I Choose?](Layouts_Which_One_Should_I_Choose_d1d8eb0.md) + - [Forms: Which One Should I Choose?](Forms_Which_One_Should_I_Choose_d1d8eb0.md) - [sap.f](sap_f_0b455b0.md) - [Building an App with the Flexible Column Layout and Related Classes](Building_an_App_with_the_Flexible_Column_Layout_and_Related_Classes_59a0e11.md) - [Flexible Column Layout](Flexible_Column_Layout_2abdefb.md) diff --git a/docs/sidebar.md b/docs/sidebar.md index 2d7abc45..5dd1bcad 100644 --- a/docs/sidebar.md +++ b/docs/sidebar.md @@ -785,7 +785,7 @@ - [Semantic Page \(sap.f\)](Semantic_Page_sap_f_47dc868.md) - [Semantic Page \(sap.m\)](Semantic_Page_sap_m_4a97a07.md) - [Tables: Which One Should I Choose?](Tables_Which_One_Should_I_Choose_148892f.md) - - [Layouts: Which One Should I Choose?](Layouts_Which_One_Should_I_Choose_d1d8eb0.md) + - [Forms: Which One Should I Choose?](Forms_Which_One_Should_I_Choose_d1d8eb0.md) - [sap.f](sap_f_0b455b0.md) - [Building an App with the Flexible Column Layout and Related Classes](Building_an_App_with_the_Flexible_Column_Layout_and_Related_Classes_59a0e11.md) - [Flexible Column Layout](Flexible_Column_Layout_2abdefb.md)