Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 18 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion modules/ROOT/pages/glossary.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
13 changes: 12 additions & 1 deletion modules/ROOT/pages/release-notes.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion modules/applications/applications-nav.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
73 changes: 69 additions & 4 deletions modules/applications/pages/bonita-ui-builder.adoc
Original file line number Diff line number Diff line change
@@ -1,23 +1,88 @@
= Applications with Bonita UI Builder
:page-aliases: ROOT:bonita-ui-builder.adoc
:description: Bonita UI Builder allows to build the UI of an application.
They are not anymore standalone elements (such as pages and forms) in a process (paradigm change with legacy Bonita UI Designer).

{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 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.


== 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: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]#]
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:download-and-launch.adoc[[.card-title]#Download and launch# [.card-body.card-content-overflow]#pass:q[Steps to download and launch Bonita UI Builder]#]
--

[.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]#]
--

[.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]#]
--

[.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]#]
--

[.card-section]
== How-tos

== Legal notice

Bonita UI Builder is commercially licensed and has Copyright (c) 2024 Bonitasoft S.A.
[NOTE]
====
For Subscription editions only.
====

*Bonita UI Builder* has been developed based on Appsmith and modifies some portions of it to integrate with the Bonita Platform.

*Appsmith* is an open-source project. It can be obtained in its original version at https://github.com/appsmithorg/appsmith[its Github home page] or through the https://www.appsmith.com/[official website]. +
It is licensed under the https://www.apache.org/licenses/LICENSE-2.0[Apache License 2.0].
138 changes: 134 additions & 4 deletions modules/applications/pages/faq.adoc
Original file line number Diff line number Diff line change
@@ -1,7 +1,137 @@
= FAQ
:description:

[NOTE]
====
For Subscription editions only.
====

== 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 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, copy/paste
|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.
108 changes: 108 additions & 0 deletions modules/applications/pages/uid-applications-index.adoc
Original file line number Diff line number Diff line change
@@ -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]#]
--

Loading