Fermentation pop-ups

The custom pop-up in the fermentation app is just an example of how dynamic data registration via web forms can be done.

It illustrates how pop-ups can be seamlessly included into the existing interface to add additional functionality.

Pop-up HTML

The pop-up itself is written in HTML, it is, however, wrapped in a JavaScript method.

The Dialog plugin provides the platform on which the HTML view is written as shown below

import { DialogPlugin } from '@scifeon/plugins';

export class PopupTakeSample implements DialogPlugin {
    view = () => `
<ux-dialog>
    <ux-dialog-header>
        <h2>Take Fermentation Sample</h2>
    </ux-dialog-header>
    <ux-dialog-body>
    ...

The body of the pop-up is written after the <ux-dialog-body> tag.

Insertion into ViewModel

The pop-up written in the previous section is then implemented in a custom panel by calling the view model with a function call:

takeSample() {
    this.dialog.open({
        viewModel: PopupTakeSample,
        model: { }
    }).whenClosed(result => {
    });
}

Once the pop-up is closed, data entered is returned to the result variable.

The result looks like this: