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

refactor: move images of the "applications" module #2914

Merged
merged 1 commit into from
Nov 27, 2024
Merged
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
6 changes: 3 additions & 3 deletions modules/applications/pages/application-creation.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,19 @@ For example, the four leave management applications for employees, managers, Hum
From Bonita Studio, use the *new* button in the Studio coolbar +
It will create an empty application file with a default name and open an editor. You can *rename* this application file from the project explorer, the graphical UI or the menu *Open*.

image:images/applicationDescriptors/emptyApplicationFile_v3.png[Empty Application File] +
image:applicationDescriptors/emptyApplicationFile_v3.png[Empty Application File] +
Here is the application descriptor graphical UI provided. It is bound to the XML source, so you can use it to build your application descriptor without writing xml. +
You can switch from the graphical UI to the xml source at any moment, using the tabs _Editor_ and _Source_ at the bottom of the editor. +
A toolbar is embedded to the editor, use it to:

* *Add* an application descriptor to this application file
* *Deploy* this application file (i.e all the application descriptors in this file). +
* *Deploy* this application file (i.e. all the application descriptors in this file). +
⚠ For _development_ purposes, it also deploys their referenced pages and layout, but if those resources use REST API Extensions, you have to deploy those manually. In _production_ environment, you still need to deploy pages, layouts and REST API Extensions manually *before* to deploy the application descriptor.
* *Rename* this application file
* *Export* this application file (download the .xml)
* *Delete* this application file from your current workspace

image::images/applicationDescriptors/applicationDescriptorEditor_v3.png[Application Descriptor Editor]
image::applicationDescriptors/applicationDescriptorEditor_v3.png[Application Descriptor Editor]

The application *Token* is the identifier of your Application Descriptor; it has to be unique. It is used to define the URL root of your Application: _../apps/APPLICATIONTOKEN/.._

Expand Down
4 changes: 2 additions & 2 deletions modules/applications/pages/languages.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ To select another language, if the application uses the default xref:bonita-layo
. Click on the "Apply" button
. Close the modal window

image:images/UI2021.1/select-language.png[Select language]
image:UI2021.1/select-language.png[Select language]

== Select a language in a Custom Application

Expand All @@ -67,7 +67,7 @@ Instructions below explain how to add a language to the Bonita Runtime. Steps be

. Go to http://translate.bonitasoft.org/[Bonita translation project].
. Select the language you are interested in.
. Make sure you click on the "Toggle Hidden Files" button image:images/crowdin_toggle_hidden_files.png[Toggle hidden files button] to see already fully translated files.
. Make sure you click on the "Toggle Hidden Files" button image:crowdin_toggle_hidden_files.png[Toggle hidden files button] to see already fully translated files.
. Browse the file tree to `{bonitaVersion}/bonita-web/portal` folder.
. For each file in the folder: open it and in the *_File_* menu click on *_Download_*. Each `.po/.pot` file has a language indicator and a locale indicator. For example, the files for the Brazilian Portuguese language end with `pt_BR.po`.
. For Subscription editions, you also need to get the files from `{bonitaVersion}/bonita-web-sp/portal` folder.
Expand Down
8 changes: 4 additions & 4 deletions modules/applications/pages/multi-language-applications.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ In order to do so, you can follow this procedure:

. Save the widget.

image::images/multi-language-applications/menu-widget.png[Menu-widget]
image::multi-language-applications/menu-widget.png[Menu-widget]

== Updating the layout

Expand All @@ -34,11 +34,11 @@ Note that the translation mechanism has been added to the menu, you need to modi
. Update your layout inside Bonita UI Designer. For more information regarding customizing the layout, go to the xref:ROOT:customize-layouts.adoc[customize layouts] page.
. Make sure your layout uses the version of the menu widget you just updated (click on the menu widget in the whiteboard to check its name and version and use the replace feature at the top right corner of the properties panel if it is not the right version).
. Inside the Localization section of the assets panel, click on the pencil icon at the right of the localizaton.json file to edit it.
image:images/multi-language-applications/edit-localization.png[Edit-localization]
image:multi-language-applications/edit-localization.png[Edit-localization]
. The localization.json file shows four different sets of strings based on the languages available.
image:images/multi-language-applications/localization.png[Localization]
image:multi-language-applications/localization.png[Localization]
. Now you need to add all the new keys in English which are the menu entry display names for the application you want to translate. For example, you will add the menu entry keys of Bonita User Application such as Processes, Cases, and Tasks inside fr-FR, es-ES, jp-JP, and pt-BR objects.
image:images/multi-language-applications/add-keys.png[Add-keys]
image:multi-language-applications/add-keys.png[Add-keys]
. Click on *Save* to save the changes you made in the localization.json file.
. Click on *Close*.
. Save and export the layout.
Expand Down
2 changes: 1 addition & 1 deletion modules/applications/pages/multi-language-pages.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ This gives the opportunity to get such strings available for translation in the

Now preview the page in each language. To do this, you need to modify the language used for Bonita web applications, which you do by setting the Bonita Applications language from xref:languages.adoc#_select_a_language_in_a_bonita_application[the Bonita Layout].

image::images/images-6_0/l10n-combined-previews.png[Multi-language page previews]
image::l10n-combined-previews.png[Multi-language page previews]

Check the translated versions of the page, and update the translated text if necessary. To update the translations, edit your `localization.json` file and then upload it again. Adjust the page layout if necessary to allow for language differences. Your multi-language page is now complete, ready to be included in an application and deployed.

Expand Down
5 changes: 2 additions & 3 deletions modules/applications/pages/navigation.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ In both cases, the user can navigate between applications they have the permissi
The first way to navigate to a different application is through the Bonita Layout.
. The user clicks on the _mosaïc_ icon in the Application header
. The user selects the tile of the application to navigate to
image:images/UI2021.1/navigation-application.png[Navigation Application]
// {.img-responsive}
image:UI2021.1/navigation-application.png[Navigation Application]

The second way is through the Application directory, which is the first application a user sees when connecting to Bonita: image:images/temp-release-notes-specific/new_app_directory_with_converted_custom_profile.png[Bonita Application Directory]
The second way is through the Application directory, which is the first application a user sees when connecting to Bonita: image:application-directory.png[Bonita Application Directory]
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@

Since Bonita 7.10 tab container evolutions, it can be tab display can be displayed `Vertically` thanks to bootstrap configuration parameters. This will cover specially use cases where tabs needs to be display in mobiles as tabs and contents will be stacked. To do that it is enough to configure vertical property at tab container properties panel. We recommend to switch type from tabs to `pills`, rendering is nicer in pills than default style as tabs.

In counterpart, in the version v0.30.1 of bootstrap there is no provided style to display the content at the right side of vertical tabs, which is a usually desired when using larger devices.
In counterpart, in the version v0.30.1 of bootstrap there is no provided style to display the content on the right side of vertical tabs, which is a usually desired when using larger devices.

To have a tab container displayed on all devices (mobile / desktop) modifying display based on devices size you could use css as described below, but feel free to extend it to match your specific needs.

image:images/vertical-tabs-container-tutorial/mobile.png[Vertical tabs container on mobile]
image:vertical-tabs-container-tutorial/mobile.png[Vertical tabs container on mobile]

image:images/vertical-tabs-container-tutorial/desktop.png[Vertical tabs container on desktop]
image:vertical-tabs-container-tutorial/desktop.png[Vertical tabs container on desktop]

== Step 1: Configure the tabs container

The Tabs container will be configured `Vertically`, add a css class tab-vertical as follows.
Remember that we recommend to switch type from tabs to `pills`, rendering is nicer in pills than default style as tabs.
image:images/vertical-tabs-container-tutorial/configuration.png[Vertical tabs container configuration]
image:vertical-tabs-container-tutorial/configuration.png[Vertical tabs container configuration]

== Step 2: Add css rules in a css file

Expand All @@ -39,4 +39,4 @@ Add following css rules in style.css asset, a new asset, or even on your applica
}
----

image:images/vertical-tabs-container-tutorial/css.png[Vertical tabs container css]
image:vertical-tabs-container-tutorial/css.png[Vertical tabs container css]
Loading