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) #2733

Merged
merged 24 commits into from
Jun 28, 2024
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
e2594e6
Update glossary.adoc
marcobonita Jun 14, 2024
bea9a33
Update release-notes.adoc
marcobonita Jun 14, 2024
abbb029
Update applications-nav.adoc
marcobonita Jun 14, 2024
b168784
Update bonita-ui-builder.adoc
marcobonita Jun 14, 2024
d49d6c3
Update faq.adoc
marcobonita Jun 14, 2024
53280af
Create uid-applications-index.adoc
marcobonita Jun 14, 2024
645568c
Update project-structure.adoc
marcobonita Jun 14, 2024
992eac5
Update ui-designer-overview.adoc
marcobonita Jun 14, 2024
3fdf343
Update create-web-user-interfaces.adoc
marcobonita Jun 14, 2024
1d74eb1
Update design-application-page.adoc
marcobonita Jun 14, 2024
c3f7b23
Update bonita-ui-builder.adoc
marcobonita Jun 14, 2024
062c30b
Update faq.adoc
marcobonita Jun 14, 2024
bdbe6c8
Update modules/applications/pages/uid-applications-index.adoc
marcobonita Jun 19, 2024
af86f70
Update uid-applications-index.adoc
marcobonita Jun 19, 2024
91c9c39
Merge branch '2024.3' into patch-20
marcobonita Jun 24, 2024
1bdb819
Merge branch '2024.3' into patch-20
marcobonita Jun 24, 2024
4af5a65
Update release-notes.adoc
marcobonita Jun 24, 2024
9bc0787
Merge branch '2024.3' into patch-20
marcobonita Jun 24, 2024
a5c9eeb
Update modules/ROOT/pages/release-notes.adoc
benjaminParisel Jun 24, 2024
0b21201
Merge branch '2024.3' into patch-20
marcobonita Jun 25, 2024
809b166
Update uid-applications-index.adoc
marcobonita Jun 25, 2024
f66274e
Merge branch '2024.3' into patch-20
rbioteau Jun 28, 2024
b5c85b8
Update modules/applications/pages/faq.adoc
rbioteau Jun 28, 2024
5fc0f7e
Update faq.adoc
rbioteau Jun 28, 2024
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.

== 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
52 changes: 47 additions & 5 deletions modules/applications/pages/bonita-ui-builder.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
146 changes: 141 additions & 5 deletions modules/applications/pages/faq.adoc
Original file line number Diff line number Diff line change
@@ -1,7 +1,143 @@
= FAQ
:description:
:description: Here you can find answers to your questions about Bonita UI Builder.

[NOTE]
====
For Subscription editions only.
====
{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 advancedApplication?
rbioteau marked this conversation as resolved.
Show resolved Hide resolved
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.
105 changes: 105 additions & 0 deletions modules/applications/pages/uid-applications-index.adoc
Original file line number Diff line number Diff line change
@@ -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.

marcobonita marked this conversation as resolved.
Show resolved Hide resolved
{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]#]
--
4 changes: 2 additions & 2 deletions modules/bonita-overview/pages/project-structure.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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]
Expand Down
Loading