Get started with X4 Suite 6.0: Web Apps

Part 1: Create Your First Web App in 5 Minutes.

Tutorial: First Steps with X4 Activities Web Apps

Contents

This is the first of a series of tutorials. In this series you will learn the basics of creating a Web App with X4 Activities.

A more detailed introduction can be found in the X4 Activities manual.

At the end of the series, you will have a Web App that you can use to manage a movie database.

In this tutorial:
  • You will create a Web App Project in the X4 Designer.
  • You will process the Web App.
  • You will check the project files.

At the end of this tutorial you will have a working X4 Activities Web App, which you will use in later tutorials.

Case

Highlights of Release 6.0 of the X4 Suite

X4 Suite Components

X4 Activities Web App

Industries

All Industries

1. Creating a X4 Activities Web App

To open the Project Creation Wizard, click New > Web App Project in the File menu of the X4 Designer.

Web Apps 1

Name the project MovieManager.

Web Apps 2

The following project is created:

Web Apps 3

2. Processing the Web App

Right-click on the Web App project. Select Open Web App in browser from the context menu.

Web Apps 4

In the browser, log in to the Web App with the default credentials.

Web Appas 5

After the login, you will get to your Web App.

Web Apps 6

3. Checking the Project Files

The following is an overview of the project folders and files that you will use in the later tutorials.

Folder “Resources”

This folder contains static files (resources) that are available to the end user through the Web App, such as the application logo or displayed images.

CAUTION: The contents of this folder may be available on the internet!

Folder “Services”

This folder contains a folder structure similar to the structure of ESB projects. Within this folder, the logic of the Web App is defined with X4 processes. The following subfolders are explained here:

  • Adapters: Contains references to adapters.
  • Processes: Contains X4 processes that represent the logic of the Web App.
  • Resources: Contains resources for use in the processes (NOTE: The contents of this folder are NOT available on the internet!)
  • TemporaryFiles: Contains temporary files for use in the processes.
  • Transformations: Contains transformation file for use in the processes.

Folder “Translations”

Contains translation files for localizing the Web App.

File “MovieManager.dpr”

Declarative description file (XML) of the privacy policy of the Web App. This file is optional and can be removed if no privacy statement is required for the Web App.

File “MovieManager.imprint”

Declarative description file (XML) of the imprint of the Web App. This file is optional and can be removed if no imprint is required for the Web App.

File “MovieManager.theme”

Theme Editor for the Web App. The Theme Editor enables to customize the theme based on Material Design color palettes.

File “MovieManager.wad”

Declarative description file (XML) of the Web App. The Web App definition contains the description of the data model as well as the description of the surfaces.

You can find further information on WAD files in the X4 Activities manual.

4. Next Steps

In this tutorial:
  • You have created an X4 Activities Web App.
  • You have processed the Web App.
  • You have checked the project files.

Continue with the next tutorial of the series (on the start page of the X4 Designer – as soon as available)

Download Demo Files

Do you have any further questions?