Skip to content

Inline Applications

As you know now an application will start always inside of the current stage. But it is also possible to start an application inside of a widget or even inside an application.

Widget Inline Applications

Let's add to our first widget a button. This button will call the widget class method app which take the same arguments like the application definition in apps.js. You can of course start each application, but we use here the method to define an application directly like in the previous chapter:

widgets/my-first-widget.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Widget, Calendar } from "@codecoupler/cc-ui";
export default class extends Widget {
  async init(env, options) {
    env.$element.html(`
      <h1>My First Widget!</h1>
      <p>Text: ${options.text}</p>
      <button class="btn btn-primary">Start Date Selector</button>
    `);
    env.$element.find("button").on("click", () => {
      this.app({
        id: "DateSelection",
        app: {
          panel: {
            panelSize: "300 350",
            headerControls: "closeonly xs",
            headerTitle: "Select..."
          },
          widget: {
            widget: Calendar,
            options: {
              onlyBackgroundEvents: true,
              themeToolbar: "small"
            }
          }
        }
      });
    });
  }
}

You can start in each widget instance the inline application only once. This work only because the arguments starting the application have an id.

If you remove this id the application will start everytime you click the button. Try it by yourself by removing the line id: "DateSelection" in widgets/my-first-widget.js.

Application Inline Applications

Let'd do the same for the surrounding application and add a button that starts an inline application:

apps/custom-buttons.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Calendar } from "@codecoupler/cc-ui";
async function justWait() {
  await new Promise(resolve => setTimeout(resolve, 2000));
}
export default {
  /* .... left out for the sake of simplicity .... */
  inline: {
    class: "primary",
    text: "app",
    click: async app => {
      await app.app({
        id: "DateSelection",
        app: {
          panel: {
            panelSize: "300 350",
            headerControls: "closeonly xs",
            headerTitle: "Select..."
          },
          widget: {
            widget: Calendar,
            options: {
              onlyBackgroundEvents: true,
              themeToolbar: "small"
            }
          }
        }
      }).initialized;
    }
  }
};

As you can see we are waiting till initialized is resolved. We will explain this later.

Use this new Button in your application:

apps/testing-buttons.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { Application, Layout } from "@codecoupler/cc-ui";
import buttons from "./custom-buttons";
import MyFirstWidget from "../widgets/my-first-widget.js";
export default class extends Application {
  static ui = {
    name: "Testing Buttons",
    iconHtml: '<i class="fas fa-seedling fa-fw"></i>'
  };
  async init(env, options) {
    let layout = {
      header: {
        show: true
      },
      root: {
        /* .... left out for the sake of simplicity .... */
      }
    };
    await super.init({
      panel: {
        panelSize: "820 600",
        headerTitle: "My First Title",
        footerToolbar:
          '<i class="far fa-hand-point-right mx-1"></i> [inline][blocks][hints][alerts][close]',
        content: `
          <div class="d-flex flex-column h-100">
          <div class="bg-info text-center text-white py-3">+++ ${options.text} +++</div>
          <div class="flex-grow-1 position-relative" data-role="widget"></div>
          </div>
        `
      },
      buttons: buttons,
      widget: {
        widget: Layout,
        options: layout
      }
    });
  }
}

Inline Application Rules

For inline application the following rules apply:

  • Cannot be started maximized or without a header toolbar.
  • Will not be remembered in navigation history or saved in the last started application storage.