diff --git a/modules/ROOT/pages/glossary.adoc b/modules/ROOT/pages/glossary.adoc index 7d667c0976..83c376080b 100644 --- a/modules/ROOT/pages/glossary.adoc +++ b/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. Bonita UI Designer will be phased out as we fully transition to Bonita UI Builder. == C diff --git a/modules/ROOT/pages/release-notes.adoc b/modules/ROOT/pages/release-notes.adoc index c996366296..2094d46bb3 100644 --- a/modules/ROOT/pages/release-notes.adoc +++ b/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 diff --git a/modules/applications/applications-nav.adoc b/modules/applications/applications-nav.adoc index 22212d7c35..2fd3dc46a6 100644 --- a/modules/applications/applications-nav.adoc +++ b/modules/applications/applications-nav.adoc @@ -10,7 +10,7 @@ *** xref:how-tos-builder.adoc[How-tos] *** 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] diff --git a/modules/applications/pages/bonita-ui-builder.adoc b/modules/applications/pages/bonita-ui-builder.adoc index fa50d9557e..f9a8b46759 100644 --- a/modules/applications/pages/bonita-ui-builder.adoc +++ b/modules/applications/pages/bonita-ui-builder.adoc @@ -1,23 +1,43 @@ = Applications with Bonita UI Builder :page-aliases: ROOT:bonita-ui-builder.adoc -:description: Bonita UI Builder allows to build the UI of an application. +:description: In this section, you will learn more about: Bonita UI Builder, its purpose, how to subscribe and start using it, as well as Applications. They are not anymore standalone elements (such as pages and forms) in a process (paradigm change with legacy Bonita UI Designer). {description} [.card-section] -== Initiation Manual +== Bonita UI Builder -[.card.card-index] --- -xref:ROOT: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]#] --- + +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 JS 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. + +We offer xref:applications:initiation-manual.adoc[extensive documentation], xref:applications:how-tos-builder.adoc[tutorials], and a xref:applications:faq.adoc[FAQ] to help you make the most of Bonita UI Builder. + + + +[.card-section] +== 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 Bonita Applications. + +“Applications” are very similar to “Living Applications”, which are created with Bonita UI Designer and will be phased out. [.card-section] -== How-tos +== How to start using Bonita UI Builder + +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 xref:applications:initiation-manual.adoc[initiation manual]. + -[NOTE] -==== -For Subscription editions only. -==== diff --git a/modules/applications/pages/faq.adoc b/modules/applications/pages/faq.adoc index 44e35f245c..35c87e05f2 100644 --- a/modules/applications/pages/faq.adoc +++ b/modules/applications/pages/faq.adoc @@ -1,7 +1,136 @@ = FAQ :description: -[NOTE] -==== -For Subscription editions only. -==== + +== Bonita UI Builder + +=== What is Bonita UI Builder? +Bonita UI Designer (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 advancedApplication? +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 +|No +|Yes + +|Stack +|AngularJS +|React + +|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. diff --git a/modules/applications/pages/uid-applications-index.adoc b/modules/applications/pages/uid-applications-index.adoc new file mode 100644 index 0000000000..6b5df4d587 --- /dev/null +++ b/modules/applications/pages/uid-applications-index.adoc @@ -0,0 +1,108 @@ += 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]#] +-- + diff --git a/modules/bonita-overview/pages/project-structure.adoc b/modules/bonita-overview/pages/project-structure.adoc index 4e08b291be..be71243b5c 100644 --- a/modules/bonita-overview/pages/project-structure.adoc +++ b/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] diff --git a/modules/bonita-overview/pages/ui-designer-overview.adoc b/modules/bonita-overview/pages/ui-designer-overview.adoc index de4dfcf920..6231b3ef41 100644 --- a/modules/bonita-overview/pages/ui-designer-overview.adoc +++ b/modules/bonita-overview/pages/ui-designer-overview.adoc @@ -6,6 +6,11 @@ {description} +[NOTE] +==== +We are excited to announce the release of Bonita UI Builder, our new and enhanced development environment for creating interfaces, pages and forms for your applications! 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 using Bonita UI Builder. +==== + == Usage It is a web-based tool that is launched from Bonita Studio. + diff --git a/modules/getting-started/pages/create-web-user-interfaces.adoc b/modules/getting-started/pages/create-web-user-interfaces.adoc index 4f9905ce43..81556becb2 100644 --- a/modules/getting-started/pages/create-web-user-interfaces.adoc +++ b/modules/getting-started/pages/create-web-user-interfaces.adoc @@ -62,3 +62,9 @@ Do the same set of operations with the form for _Read the answer and rate it_ ta Execute this new process version and see that the form still offers the option to capture the data required by the contract, but now also displays the data provided at the process start and in previous steps. In the xref:ROOT:define-who-can-do-what.adoc[next chapter] you'll assure that individual tasks can only be performed by appropriate users. + + +[NOTE] +==== +This Getting Started tutorial is using Bonita UI Designer, which is a development environment that will be phased out as we fully transition to Bonita UI Builder. Bonita UI Builder allows for designing all kind of interfaces, forms and pages, without distinction. Check out the dedicated xref:applications:initiation-manual.adoc[document section] to learn how to use Bonita UI Builder to make forms. +==== diff --git a/modules/getting-started/pages/design-application-page.adoc b/modules/getting-started/pages/design-application-page.adoc index 2e6e769643..d2d47ce9e5 100644 --- a/modules/getting-started/pages/design-application-page.adoc +++ b/modules/getting-started/pages/design-application-page.adoc @@ -60,3 +60,8 @@ The preview should look like this: image:images/getting-started-tutorial/design-application-page/dashboard-page-preview.png[dashboard page preview] Now you have your first application page. It's time to move to the xref:ROOT:create-application.adoc[next chapter] and create the xref:create-application.adoc[application] that will include the page. + +[NOTE] +==== +This Getting Started tutorial is using Bonita UI Designer, which is a development environment that will be phased out as we fully transition to Bonita UI Builder. Bonita UI Builder allows for designing all kind of interfaces, forms and pages, without distinction. Check out the dedicated xref:applications:initiation-manual.adoc[document section] to learn how to use Bonita UI Builder to make application pages. +====