Last updated on 13-May-2020 by Jakob Jakobsen Boysen

Jakob Jakobsen Boysen

Platform Lead
boysen@scifeon.com

, Thomas P. Boesen

Thomas P. Boesen

Founder
boesen@scifeon.com

With this plugin you can create your own pages in Scifeon. A page consist of a view (HTML) for the user interface and a view model (JavaScript) for the logic.

Definition

Pages are defined in the contributions.json file. A page is described by the following JSON:

{
  "id":           "string",   // required
  "src":          "string",   // required
  "description":  "string"    // optional
}

• id Used for referencing the page, e.g. in routes.
• src The relative path to the view and view model files. The view and view model must have the same file name, except for the file extension. For example, if the view is named custom-page.html and located in the folder src/pages relative to the contributions.json, the src-element should have the value src/pages/custom-page, and the view model should be named custom-page.js. See more in the example below.
• description An optional description, mainly used for administrators.

View model

The view model must have the same name as the view and reside in the same folder as the view. Best practice is also to name the class name of the view model similar to the name of the file (but without hyphens, and with PascalCasing), e.g. if the file is named custom-page.js, then name the class like this:

export class CustomPage {
  constructor() {
    this.prop1 = 'Property1';
  }

  fn() {
    this.prop2 = 'This function sets this.prop2';
  }
}

In the above we have two properties, prop1 and prop2, and a function fn(), these are all accessible from within the view. In the next section you can see how to access properties and interact with functions from view model in the view.

View

The view defines what the user sees. The view is written using plain HTML, but with some decorators from Aurelia - Scifeon is based on Aurelia. This means we have a very powerful templating engine, where we can use features such as binding, repeaters, conditional statements for view state. See more on the Aurelia documentation site.

Defining a view

The view must be wrapped in the <template> element. The most basic example of a view:

<template>
  <p>Hello, from Scifeon!</p>
</template>

Binding and referencing properties and function

No content yet.

Special SCIFEON object

In all views, the special SCIFEON object will automatically be injected. This contains several useful functions for use in the view. See the documentation of SCIFEON for utilities, and the example below for usage.

Example

In this example we create a simple page, where we show how to inject a logger, how to interact with the SCIFEON-object in the view, and how to interact with the view model from the view:

View model

This view model contains a logger, a property named message and a function named buttonClick(), that will fire an alert in the browser.

src/pages/custom-page.js:

import { inject, ConsoleLogger } from 'scifeon';

@inject(ConsoleLogger)
export class CustomPage {
  constructor(logger) {
    this.logger = logger;
    this.logger.debug('Logger enabled');

    this.message = 'Hello World!';
  }

  buttonClick() {
    alert('Button clicked!')
  }
}

View

In the following, notice how the click.trigger-attribute is used on the button, to interact with the view model above.

The message-property from above is shown in the paragraph below with the use of the place holder ${ }. The message-property is also referenced in the bind.value-attribute of the <input>-element. This means the message will update, whenever the user enters something in the input-field.

src/pages/custom-page.html:

<template>
  <div class="page-with-header">
    <div class="page-header">
      <h1>Scifeon Skeleton App</h1>
    </div>

    <div class="page-panels">
      <p>Message from JS: ${message}</p>
      <p><button click.trigger="button()">Call function!</button></p>
      <p><input type="text" bind.value="message"/></p>

      <p>Click to download <a href="${ SCIFEON.Utils.getFileUrl('/content/FileForDownload.xlsx') }">FileForDownload.xlsx</a> included in this App.</p>
      <p>Same file referenced by id: <a href="${ SCIFEON.Utils.getFileUrl('xl-file') }">FileForDownload.xlsx</a></p>
    </div>
  </div>
</template>

contributions.json

The following snippet defines the custom page (notice the value of the src-element) and adds a route referring to it:

{
...
  "contributions": {
    "plugins": [
      {
        "id": "customPageId",
        "src": "src/pages/custom-page",
        "description": "This is a custom page.",
        "types": ["page"]
      }
    ],
    "routes": [
      {
        "id":     "customRouteId",
        "route":  "custom/route", 
        "title":  "Custom Route Page", 
        "pageId": "customPageId"
      }
    ]
  }
}