---
source: https://qlik.dev/embed/capability-api/customize/session-apps/create_session-apps-from-apps/
last_updated: 2025-07-08T16:09:30Z
---

# Creating session apps from existing apps

> **Note:** Where possible, use [qlik-embed](https://qlik.dev/embed/qlik-embed/) and [qlik/api](https://qlik.dev/toolkits/qlik-api) rather than this framework.

Learn how to create apps on the fly using the `sessionAppFromApp` method.

If you are new to session apps, review [apps and session apps](https://qlik.dev/embed/foundational-knowledge/apps-session-apps) before
continuing.

## Creating a session app from an app

This example creates a session app from an existing app using the
`qlik.sessionAppFromApp` method. It also displays an existing visualization from
that app.

> **Note:** For the app you are creating the session app from, you must:
>
> - have at least update rights.
> - be able to reload data.

### Create the container

Create a folder named `sessionAppFromApp` to contain your assets:

### Create the container files

Create an HTML file and name it `index.html` if you want to make a new web page.
You can also open an existing HTML page where the chart should be.

Create a JavaScript file and call it `sessionAppFromApp.js`.

Reference the JavaScript file in the HTML file:

```html
<script src="sessionAppFromApp.js"></script>
```

### Include Qlik Cloud in your web page

Reference the Qlik Cloud implementation of RequireJS and a CSS file to ensure
the visualizations are styled as expected. Include the CSS reference in the
`head` section of your web page:

```html
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css"/>
```

Include the RequireJS reference before the closing body tag:

```html
<script src="../../resources/assets/external/requirejs/require.js"></script>
```

Add some internal styling inside the `head` of the HTML file to format the
presentation of the chart.

```html
<style>
    div.qvobject {
        flex: 1 1 auto;
        height: 400px;
        width: 800px;
        margin: 45px 0 0 45px;
    }
</style>
```

Place the Qlik Cloud objects that have been defined in the JavaScript file
inside `div` tags inside the `body` of the HTML file.

```html
<div id="QV01" class="qvobject"></div>
```

### Configure the host connection

In the JavaScript file, configure the connection to Qlik Cloud.

```javascript
const config = {
  host: '<TENANT_URL>', //for example, 'abc.us.qlikcloud.com'
  prefix: '/',
  port: 443,
  isSecure: true,
  webIntegrationId: '<WEB_INTEGRATION_ID>'
};
require.config( {
  baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host +
  (config.port ? ":" + config.port : "") + config.prefix + "resources"});
```

### Create the session app

The `qlik` object is an instance of the `Root` API. After you configure your
connection to the server, you can open an app or, like in this case, create a
new app on the fly using the `sessionAppFromApp` method:

```javascript
const sessionAppFromApp = qlik.sessionAppFromApp("<APP_ID>", config);
```

This returns an app JavaScript object with some app methods, so you can now work
with your app that uses the App API.

### Reload the data and display an existing visualization

Reload the data. If the data loads successfully, display a visualization with ID
`HrZsPG` in a HTML element with ID `QV01`.

```javascript
sessionAppFromApp.doReload().then((result)=>{
    if( result ){
        sessionAppFromApp.getObject('QV01', 'HrZsPG');
    } 
    else {
        console.log('Reload failed');
    }
});
```

### Complete the code

A `require()` function is needed to load the Qlik APIs so that they can be
accessed by the mashup. The complete JavaScript code for this example is shown
below. Notice that the creation and data loading of the session app, and display
of the chart are included within the scope of the `require()` function.

```javascript
const config = {
  host: '<TENANT_URL>', //for example, 'abc.us.qlikcloud.com'
  prefix: '/',
  port: 443,
  isSecure: true,
  webIntegrationId: '<WEB_INTEGRATION_ID>'
};
require.config( {
  baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host +
  (config.port ? ":" + config.port : "") + config.prefix + "resources"});

require( ["js/qlik"], ( qlik )=> {
    const sessionAppFromApp = qlik.sessionAppFromApp("<APP_ID>", config);
    sessionAppFromApp.doReload().then((result)=>{
        if( result ){
            sessionAppFromApp.getObject('QV01', 'HrZsPG');
        } 
        else {
            console.log('Reload failed');
        }
    });
});
```

### Test your mashup

For example:

`https://your_web_server_URL:port`