feat: adding UIB communication content (#2722 improvement) (#2733)

Content of #2722 +
suggested changes

---------

Co-authored-by: Benjamin Parisel <benjamin.parisel@bonitasoft.com>
Co-authored-by: Romain Bioteau <romain.bioteau@bonitasoft.com>

modules/ROOT/pages/glossary.adoc

@@ -37,8 +37,11 @@ Bonita Runtime is dedicated to operate automation projects. It is composed of on
 Bonita Studio::
 Bonita Studio contains all the elements needed to develop and build a project. It is a desktop application based on Eclipse IDE.
 
+Bonita UI Builder::
+Bonita UI Builder (sometimes abbreviated UIB) is a development environment used for creating all kind on interfaces, whether they are pages or forms or else, that make up an Application. It is a web-based tool that is launched from a Bonitasoft custom docker image.
+
 Bonita UI Designer::
-Bonita UI Designer (sometimes abbreviated _UID_) is a development environment used for creating pages and forms that make up a Living Application. It is a web-based tool that is launched from Bonita Studio.
+Bonita UI Designer (sometimes abbreviated UID) is a development environment used for creating pages and forms that make up a Living Application. It is a web-based tool that is launched from Bonita Studio. 
 
 == C
 

modules/ROOT/pages/release-notes.adoc

@@ -8,7 +8,18 @@ The {bonitaVersion} version is in development.
 
 == Bonita UI Builder
 
-Available in all Scale subscription and as a payable add-on in Convert subscriptions only. Connect with our dedicated sales team to start your upgrade journey today!
+We are excited to announce the release of Bonita UI Builder, our new and enhanced development environment for creating all kind of interfaces, pages and forms for your applications! It brings along a host of advanced features and improved usability, designed to help you create even more compelling and user-friendly interfaces.
+
+During this transition period, Bonita UI Designer will remain available to ensure a smooth and seamless experience for all our users. You can continue to use Bonita UI Designer as usual, while also having the opportunity to explore and get familiar with the capabilities of Bonita UI Builder.
+
+Eventually, Bonita UI Designer will be phased out as we fully transition to Bonita UI Builder. Rest assured, we are committed to providing comprehensive support and resources throughout this process. Our goal is to make this transition as smooth as possible, minimizing any disruption to your workflow.
+
+Here’s what you can expect during this period:
+
+* Continued access: Bonita UI Designer will remain fully operational for an extended period, allowing ample time for adaptation.
+* Support and resources: We offer extensive documentation, tutorials, and support to help you make the most of xref:applications:bonita-ui-builder.adoc[Bonita UI Builder] 
+* Facilitated transition: We are dedicated to facilitate the transition, with detailed guides on how to use Bonita UI Builder, as well as https://www.bonitasoft.com/professional-services/on-demand-services[professional services support]
+
 
 == New available values
 

modules/applications/applications-nav.adoc

@@ -12,7 +12,7 @@
    **** xref:how-to-control-visibility-of-widgets.adoc[How to control visibility of your widgets]
   *** xref:resources.adoc[Resources]
   *** xref:faq.adoc[FAQ]
- ** xref:custom-applications-index.adoc[Living applications with Bonita UID (Legacy)]
+ ** xref:uid-applications-index.adoc[Living applications with Bonita UID]
   *** xref:application-creation.adoc[Application descriptor]
   *** xref:layout-development.adoc[Layout]
    **** xref:bonita-layout.adoc[Bonita Layout]

modules/applications/pages/bonita-ui-builder.adoc

@@ -4,26 +4,68 @@ They are not anymore standalone elements (such as pages and forms) in a process
 
 {description}
 
+
+== Bonita UI Builder
+
+Bonita UI Builder is a development environment made for designing all kind of interfaces, pages, forms, for your applications. 
+It brings a host of advanced features and improved usability, designed to help you create even more compelling and user-friendly interfaces: 
+
+* A set of more than 45 widgets
+* A wide gallery template
+* Code completion
+* Custom JavaScript code
+* Native debugging option
+* A restriction-free drag & drop interface
+* Import and export JSON options
+* React interfaces
+* ...and many more
+
+Bonita UI Builder is an application-centric development environment that allows for designing forms and application pages, without distinction. You can now design fully-fledged applications, embedding dashboards and complex interfaces. Or, you can just design single-page applications. The choice is up to you. 
+
+With Bonita UI Builder, you can still manage your workflows, continuous integration, etc., the way you’re managing them now. 
+
+
+== Applications
+
+Applications are created and operated within Bonita Platform, created with Bonita Studio and Bonita UI Builder, deployed with Bonita Continuous Delivery, run by Bonita Runtime. 
+
+They are a navigation of pages that can be accessed by a xref:identity:profiles-overview.adoc[Profile]. They aim to display and structure the right information and provide the right controls at the right time to the profiles, so they can efficiently perform their tasks. Once pushed to production, Applications cannot be live edited.
+
+Bonita also comes with four xref:runtime:bonita-applications-interface-overview.adoc[Bonita Applications].
+
+“Applications” are very similar to “Living Applications”, which are created with Bonita UI Designer and will be phased out. Once pushed to production, Applications cannot be live edited
+
+
+== Subscription
+
+Bonita UI Builder is available by default and for no additional cost in all https://www.bonitasoft.com/pricing[Scale subscriptions]. It is also available as a payable add-on in https://www.bonitasoft.com/pricing[Access subscriptions]. 
+
+If you haven’t subscribed to a Scale of Access plan yet, please https://www.bonitasoft.com/contact-us[get in touch] with our sales team to start your journey today!
+
+If you have already subscribed to a Scale plan or purchased the UI Builder add-on, then start your journey by following our documentation.
+
+
 [.card-section]
-== Initiation Manual
+== Start your journey
 
 [.card.card-index]
 --
-xref:download-and-launch.adoc[[.card-title]#Download and launch# [.card-body.card-content-overflow]#pass:q[Steps to download and launch Bonita UI Builder]#]
+xref:applications:initiation-manual.adoc[[.card-title]#Initiation manual# [.card-body.card-content-overflow]#pass:q[Steps to download and use Bonita UI Builder]#]
 --
 
 [.card.card-index]
 --
-xref:interact-with-your-bonita-process.adoc[[.card-title]#Interact with your Bonita process# [.card-body.card-content-overflow]#pass:q[Steps to interact with your Bonita process]#]
+xref:applications:resources.adoc[[.card-title]#Resources# [.card-body.card-content-overflow]#pass:q[Make the most of Bonita UI Builder]#]
 --
 
 [.card.card-index]
 --
-xref:builder-declare-interface-in-bonita.adoc[[.card-title]#Declare the interface in Bonita# [.card-body.card-content-overflow]#pass:q[Steps to declare your interface and display it in Bonita]#]
+xref:applications:faq.adoc[[.card-title]#FAQ# [.card-body.card-content-overflow]#pass:q[Find answers to your questions]#]
 --
 
 [.card-section]
-== How-tos
+
+
 
 == Legal notice
 

modules/applications/pages/faq.adoc

@@ -1,7 +1,148 @@
 = FAQ
-:description:Find here the answers to the frenquently asked questions about Bonita UI Builder and Application Links.
 
-== My application link is incorrect when accessing the Application Directory from my custom application.
+:description: Here you can find answers to your questions about Bonita UI Builder.
+
+{description}
+
+== Bonita UI Builder
+
+=== What is Bonita UI Builder? 
+Bonita UI Builder (sometimes abbreviated UIB) is a development environment used for creating all kind on interfaces, whether they are pages or forms or else, that make up an Application. It is a web-based tool that is launched from a Bonitasoft custom docker image. It is the new and only standard used in the Bonita ecosystem for designing interfaces.
+
+
+=== What does it mean for my workflows? 
+There should be no changed in your logic, continuous integration, and workflows. You can still manage them the way you’re managing them today. Just download the docker image and follow the xref:applications:initiation-manual.adoc[initiation manual]. 
+
+
+=== How to subscribe? 
+Bonita UI Builder is available by default and for no additional cost in all https://www.bonitasoft.com/pricing[Scale subscriptions]. It is also available as a payable add-on in https://www.bonitasoft.com/pricing[Access subscriptions].
+
+
+
+=== How to use? 
+Please refer to the xref:applications:initiation-manual.adoc[initiation manual]. If you have any other additional questions, reach out to our https://csc.bonitacloud.bonitasoft.com[Support team].
+
+
+
+=== Can I expect any support from Bonitasoft?
+Yes you can!
+
+* Support and resources: We offer extensive documentation, tutorials, and support to help you make the most of xref:applications:bonita-ui-builder.adoc[Bonita UI Builder].
+* Facilitated transition: We are dedicated to facilitate the transition, with detailed guides on how to use Bonita UI Builder, as well as https://www.bonitasoft.com/professional-services/on-demand-services[professional services support].
+
+
+
+=== I am using the Open source edition of Bonita, can I use Bonita UI Builder? 
+Unfortunately no. You’ll need to either use Bonita UI Designer or design your interfaces with the language or tool of your choice and integrate them to Bonita. Upgrade to an Access or Scale edition if you want to use Bonita UI Builder.
+
+
+
+=== Is Bonita UI Builder compatible with all supported versions of Bonita?
+Bonita UI Builder is compatible with all Bonita versions starting from 2024.3.
+
+
+
+=== What is an `applicationLink` ?
+It is a tag used to describe an Application made with Bonita UI Builder in the Studio’s Application descriptor.
+
+
+
+=== Can I use other datasources than Bonita’s? 
+Theoretically you can, yes. However, we’re not supporting them yet.
+
+
+=== How do Bonita UI Builder and Bonita UI Designer compare?
+[cols="1,1,1"]
+|===
+|Feature |Bonita UI Designer |Bonita UI Builder
+
+|Widgets
+|~25
+|~45
+
+|Custom widgets
+|Yes
+|Yes
+
+|Downloadable array data
+|Yes (custom code)
+|Yes (native)
+
+|Form's auto-generation from a contract
+|Yes
+|Yes in a future release
+
+|Templates
+|No
+|Yes
+
+|Themes
+|Yes (using CSS bootstrap 3)
+|Yes (native feature)
+
+|Custom code
+|Yes (HTML, CSS, JS)
+|Yes (HTML, JS, custom JS libraries)
+
+|Code completion
+|No
+|Yes
+
+|Native debugging options
+|No
+|Yes
+
+|Application import/export
+|Yes
+|Yes (JSON)
+
+|Page components' hierarchy
+|No
+|Yes
+
+|Page preview
+|Yes
+|Yes
+
+|Undo/redo, copy/paste
+|No
+|Yes
+
+|Stack
+|AngularJS
+|React
+
+|Philosophy
+|Form-centric
+|App-centric
+
+|Works best for...
+|Quick development tests, simple use cases
+|Fully-fledged applications, complex use cases
+
+
+|===
+
+
+
+=== What does it mean for my existing forms and pages? 
+You existing forms and pages will always be compatible with Bonita. Eventually, Bonita UI Designer will be phased out as we fully transition to Bonita UI Builder. We cannot guarantee you will be able to edit your existing interfaces made with Bonita UI Designer in the future versions of Bonita.
+
+Our goal is to make this transition as smooth as possible, minimizing any disruption to your workflow:
+
+* Continued access: Bonita UI Designer will remain fully operational for an extended period, allowing ample time for adaptation.
+* Support and resources: We offer extensive documentation, tutorials, and support to help you make the most of xref:applications:bonita-ui-builder.adoc[Bonita UI Builder] 
+* Facilitated transition: We are dedicated to facilitate the transition, with detailed guides on how to use Bonita UI Builder, as well as https://www.bonitasoft.com/professional-services/on-demand-services[professional services support]
+
+
+=== Are the interfaces made with Bonita UI Builder compatible with platform mode and self-contained applications ? 
+Yes they are. 
+
+
+=== Is Bonita UI Builder Bonita Cloud compatible? 
+Yes it is. Reach out to your customer service representative to explore how you can migrate to Bonita Cloud.
+
+=== My application link is incorrect when accessing the Application Directory from my custom application.
 
 image::images/app-link/incorrectAppLink.gif[Application has incorrect Link]
 

modules/applications/pages/uid-applications-index.adoc

@@ -0,0 +1,105 @@
+= Living Applications with Bonita UID
+:description: This page explains what a Living Application is, what it is made of, and how you can create your own applications.
+{description}
+
+[NOTE]
+====
+Starting from 2024.3 version, Bonita UI Builder is the only standard for designing all your applications. It brings a host of advanced features and improved usability, designed to help you create even more compelling and user-friendly interfaces. Bonita UI Builder is an application-centric development environment that allows for designing interfaces, forms and application pages, without distinction.
+During the transition, you can continue using Bonita UI Designer while exploring Bonita UI Builder. Eventually, Bonita UI Designer will be phased out, but we will provide support and resources to ensure a smooth transition. Check our xref:applications:bonita-ui-builder.adoc[documentation] to learn more and start creating applications with Bonita UI Builder.
+====
+
+
+A Living Application is a navigation of pages that can be accessed by a xref:identity:profiles-overview.adoc[Profile]. +
+It is created and operated within Bonita Platform: created with Bonita Studio and UI Designer, deployed with Bonita Continuous Delivery, run by Bonita Runtime.
+
+Its purpose is to display and structure the right information and provide the right controls at the right time to the profiles, so they can efficiently perform their tasks. +
+
+_Graphically_, an application is made of a navigation menu and a set of pages. In some of the pages, some controls, like -"Validate" or "Reject" buttons- are directly linked to processes and execute tasks in the background. Others -like "New request" or "Add additional information"- open forms that, once submitted start a new process instance, or execute a task. +
+Bonita allows you to create xref:ROOT:bonita-purpose.adoc#_what_can_i_do_with_bonita[different types of applications]. +
+
+_Structurally_, an application is made of various xref:ROOT:project-structure.adoc[elements]. Some are directly linked to the application (name, token, navigation), others are referenced (layout, pages, profiles, theme). They are all assembled in the application descriptor. +
+
+Bonita comes with four xref:ROOT:bonita-applications-interface-overview.adoc[Bonita Applications]. +
+
+We encourage our users to create their own *custom applications* so as to create the best user experience for their specific use-cases. +
+The application can be put together by the citizen developer or a professional developer. +
+You just need to make sure that all the elements have been developed before you can use them in the application descriptor. +
+For testing purposes, Bonita provides a layout and several themes, before you create your own.
+
+[.card-section]
+== Application elements
+
+[.card.card-index]
+--
+xref:ROOT:application-creation.adoc[[.card-title]#Application descriptor# [.card-body.card-content-overflow]#pass:q[Both its ID card and the place where all elements come together]#]
+--
+
+[.card.card-index]
+--
+xref:ROOT:pages.adoc[[.card-title]#Pages# [.card-body.card-content-overflow]#pass:q[The foundation for a great end-user experience]#]
+--
+
+[.card.card-index]
+--
+xref:identity:profiles-overview.adoc[[.card-title]#Profiles# [.card-body.card-content-overflow]#pass:q[Entities of the organization who can access the application]#]
+--
+
+[.card.card-index]
+--
+xref:layout-development.adoc[[.card-title]#Layout# [.card-body.card-content-overflow]#pass:q[The visual structure of the application]#]
+--
+
+[.card.card-index]
+--
+xref:customize-living-application-theme.adoc[[.card-title]#Theme# [.card-body.card-content-overflow]#pass:q[The graphical details that create a visual identity]#]
+--
+
+[.card.card-index]
+--
+xref:ROOT:navigation.adoc[[.card-title]#Navigation between applications# [.card-body.card-content-overflow]#pass:q[How to switch from one application to another]#]
+--
+
+[.card.card-index]
+--
+xref:ROOT:multi-language-applications.adoc[[.card-title]#Multi-language applications# [.card-body.card-content-overflow]#pass:q[How to translate applications in several languages]#]
+--
+
+
+[.card-section]
+== The resources
+
+Starting the development of an application from scratch may not be the most efficient way to go. If your project implies:
+
+* That a user picks tasks in a tasklist made of all processes, you may want to try and use or customize our *Bonita User Application*
+* That an administrator-like user monitors the health of process execution and fixes the potential errors, you may want to try and use or customize our *Bonita Administrator Application*
+* Specific pages showing specific business data, you may want to *borrow a project created by a Community member and customize it*
+* Adaptive Case Management, with non-sequential parts in the processes to let the knowledge workers' expertise decide which tasks to do and which ones to skip for a dedicated case, you may check our *ACM example*
+
+[.card.card-index]
+--
+xref:runtime:user-application-overview.adoc[[.card-title]#Bonita User Application# [.card-body.card-content-overflow]#pass:q[Start process instances and execute tasks using a generic tasklist]#]
+--
+
+[.card.card-index]
+--
+xref:ROOT:admin-application-overview.adoc[[.card-title]#Bonita Administrator Application# [.card-body.card-content-overflow]#pass:q[Monitor and troubleshoot process execution]#]
+--
+
+[.card.card-index]
+--
+https://community.bonitasoft.com/project?title=&field_type_tid=All&field_project_category_tid=1341&field_certification_tid=All&sort_by=created&sort_order=DESC[[.card-title]#Community projects# [.card-body.card-content-overflow]#pass:q[Browse the Community members' applications to get inspired]#]
+--
+
+[.card.card-index]
+--
+xref:ROOT:use-bonita-acm.adoc[[.card-title]#Adaptive Case Management example# [.card-body.card-content-overflow]#pass:q[An all configured process and its dedicated application]#]
+--
+
+
+[.card-section]
+== Related topics
+
+[.card.card-index]
+--
+xref:runtime:bonita-applications-deep-dive.adoc[[.card-title]#Applications deep dive# [.card-body.card-content-overflow]#pass:q[Applications under the hood, and the four Bonita applications]#]
+--

modules/bonita-overview/pages/project-structure.adoc

@@ -30,7 +30,7 @@ However, it is not required to use all the concepts to create a valid Bonita pro
 |xref:pages-and-forms:forms.adoc[Forms]
 |Web interfaces to interact with processes (to instantiate a process and for human tasks)
 |Create
-|UI Designer
+|UI Builder or UI Designer
 |Use BPM REST API
 
 |xref:process:actor-filtering.adoc[Actor filter]
@@ -87,7 +87,7 @@ However, it is not required to use all the concepts to create a valid Bonita pro
 |xref:ROOT:pages.adoc[Application pages]
 |Web pages used within your applications
 |Create
-|UI Designer
+|UI Builder or UI Designer
 |Front-end framework
 
 |xref:ROOT:layouts.adoc[Layout]