Configure an application

In this page, you learn to configure the general settings of your app.

Application Settings

There are three panels under Settings

  1. General

  2. Properties

  3. Roles

General

Application

Name of current application.

Description

Brief description about the app.

Title

Replaced the application’s name with the provided title. This change can be seen in the browser’s tab when you click Run.

Type

Choose the type of application such as, Application,Adaptive Template,Launchpad,Building Block and Custom Component.

Package

Assign application to specific Development Package

Anonymous Access

If enabled, you can allow users to access the app without any authentication measures.

This feature is only visible when your current license allows it. By enabling this, an endpoint will be created so the app can be accessed via /public/app/name.

Properties

Open UI5 Version

Applies a specific UI5 version.

Theme

Applies theme over the application. This includes existing themes or Imported Themes.

Load code from launchpads and Load code from applications

This feature serves the purpose of exclusively loading the code, enabling autocompletion within the the preview App Designer (scripts, CSS and header). Its primary function is to provide convenient code suggestions while writing scripts in an app, particularly when working with a launchpad. Additionally, it can be beneficial when embedding one app within another, as it facilitates autocompletion from the parent app.

Tab width

Adjusts the tab width when formatting code.

Print width

The formatter will make line breaks after the given number of characters.

Compiler Target

The compiler target in TypeScript that determines the version of ECMAScript (JavaScript) that the compiler should generate as output.

Generate application version on activate

If activated, then you will be able to save versions of your application. You can select the number of versions to keep in history whenever you save and activate. Read more at Version Management

Disable Application

Disables the application and any attempt to reach it will result in a 404 error.

Enable Collaboration

Enabling this feature allows multiple developers to collaborate on the same application simultaneously. It establishes a socket connection between the client and server, enabling real-time communication. Any modifications made to the application are sent to the server and then distributed to all other clients who are also working on the application, ensuring that everyone stays synchronized with the latest changes.

Run only in Launchpad

Disables the application allowing it only to run from a launchpad and any attempt to reach it will result in a 404 error.

Minify Source Code

Minifies all source code. Minifying source code in JavaScript reduces its file size by removing unnecessary characters and whitespace, optimizing performance and improving website loading times.

Enable File Storage

Enabling this option allows the application’s JSON definition to be automatically written to a file named your-app.json . This ensures that the JSON definition of the application is easily accessible and can be utilized as needed.

Use App Handler V2

In Neptune DXP - Open Edition, there are two distinct code bases used for compiling the application definition into actual code that is served to the client. Enabling this feature ensures that the application is compiled using the new compiler, offering the benefits and enhancements provided by the updated compilation process.

Roles

In Roles you can add roles to your application for security purposes. Read more at Role.

Language Translation

In Language Translation you can translate screen object texts within an application.

This is ideally used when multiple users speak different languages.

How it works:

Once you apply your translations, the object to which you applied the translation will be translated into the user’s assigned language. This can be observed in the Security > User section. You can also view the translated results by switching languages on a launchpad.

You can translate objects in two ways:

  1. Utilizing the Google Translate API

  2. Custom translations

  3. Importing from a file

Using Google Translate

Steps to translate with Google Translate.

  1. Click on Translation

  2. At the dropdown, select the language

  3. Select which objects you wish to translate

    app designer translation select

  4. Click Google Translate.

    app designer translation column

  5. Click Save and Activate.

What users see when English is the assigned language

app designer translation before

What users see when Greek is the assigned language

app designer translation after

Custom Translation

  1. Click on Translation.

  2. At the dropdown, select the language.

  3. Select which objects you wish to translate and, enter your custom translations in the Translation column.

  4. Click Save and Activate.

Import from file

You can import a CSV file with all the translated object for a given language. The structure must look like this:

Table 1. Example of translation file
Language ID

Name

Type

Property

Value

Translation

EL

5564cd36-c2c9-4261-8f49-1d77b8884029

Title

sap.m.Title

text

Good morning!

Καλημέρα!

  1. Click on Import from File.

  2. Click Save and Activate.

Version Management

In Version Management, you have the ability to save previous versions of your app while working on your current version and to access the old version when the Autogenerated Versions is activated. This allows you to effectively track changes and maintain a history of your app’s previous iterations.

How to work with Version Management

  1. Generate a version.

    app designer versioning

  2. Give it a name.

  3. Head to Version Management.

As you can see, the left pane displays your current version of the application, while the right pane shows the newly generated version. Much like Git, this allows you to compare objects, files, and scripts, giving you control over the changes happening in your application.

This enables you to maintain a history of older versions that you can revert to if needed. Additionally, you have the option to export the selected version to a .planet9 file.

Comparing Style Sheet

app designer versioning css

Comparing Component Tree

app designer versioning tree

The remote tab allows you to compare your app with the corresponding version on another system. For instance, if you have a remote system, you can use deployment to deploy an app to that system. Subsequently, you can compare your local version of the app with the version on the remote system, ensuring consistency and identifying any differences.

Related topics