Pages
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 namedcustom-page.html
and located in the foldersrc/pages
relative to thecontributions.json
, thesrc
-element should have the valuesrc/pages/custom-page
, and the view model should be namedcustom-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
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"
}
]
}
}