Skip to content

Options: Receive Options

Any component, including a widget component, can receive options. A component can easily define default values by defining a static variable named defaults. The received options will be available over this.options.

What are we learning here?

  • A component can be loaded with load(ComponentType, ComponentOptions)
  • The passed options are available over this.options[...]
  • The default values can be defined in static defaults = {...}

Let's start pass the options myWidgetArg1 to the widget in our application. We will use here a further load method signature this.load(ComponentType, ComponentOptions):

src/demo/apps/widget-basics/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Application } from "@codecoupler/cc-ui";
import ChildComponent from "./content.js";
export default class extends Application {
  static defaults = {
    "@codecoupler": {
      panel: {
        panelSize: "640 400",
        headerTitle: "Test Widget Features"
      }
    }
  };
  async start() {
    await this.stage.load(ChildComponent, { myWidgetArg1: "Value 1" });
  }
}

Start Definition Object vs Shortcut Signature

We will use here a signature of the load method which expects a Component and its options. This is just a shortcut signature. The load method normally expects a so called start definition object. This would look like:

load({
  component: ChildComponent,
  options: { myWidgetArg1: "Value 1" }
})

Now we define two options with default values in our widget and pass the final values them into our template:

src/demo/apps/widget-basics/content.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Widget } from "@codecoupler/cc-ui";
import template from "./content.ejs.html";
import LoadingComponents from "../../widgets/loading-components";
export default class extends Widget {
  myHeader = "JS Widget Basics";
  static defaults = {
    myWidgetArg1: "Default 1",
    myWidgetArg2: "Default 2"
  };
  async start() {
    this.injectTemplate(template({
      myHeader: this.myHeader,
      Argument1: this.options.myWidgetArg1,
      Argument2: this.options.myWidgetArg2
    }));
    await this.registerStage(this.element.find("[data-role=stage]")).load(
      LoadingComponents
    );
  }
  injectTemplate(tpl) {
    this.element.html(tpl);
  }
}

Now we add the values in our template:

src/demo/apps/widget-basics/content.ejs.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<h2><%= locals.myHeader %></h2>
<div class="mt-2 card">
  <div class="card-header">Loading Components</div>
  <div class="card-body"><div data-role="stage"></div></div>
</div>
<div class="mt-2 card">
  <div class="card-header">Pass Options</div>
  <div class="card-body">
    Argument 1: <span data-role="arg1"><%= locals.Argument1 %></span><br />
    Argument 2: <span data-role="arg2"><%= locals.Argument2 %></span>
  </div>
</div>

As you can see you can access all options of a widget over this.options. Options that will not be passed to the widget get the values from the defaults.