smf-rbox-helper

 ____                       _    __                      _       
/ ___| _ __ ___   __ _ _ __| |_ / _| __ _  ___ ___      (_) ___  
\___ \| '_ ` _ \ / _` | '__| __| |_ / _` |/ __/ _ \     | |/ _ \ 
 ___) | | | | | | (_| | |  | |_|  _| (_| | (_|  __/  _  | | (_) |
|____/|_| |_| |_|\__,_|_|   \__|_|  \__,_|\___\___| (_) |_|\___/ 
-----------------------------------------------------------------

rbpx-helper

This library contains helper functionalities for Smartface RepeatBox UI object. Provided functionalities:

• data binding row render

Install

npm i smf-rbox-helper

Smartface

If you are within a Smartface workspace first switch to scripts folder. Here is a script that does it all:

(cd ~/workspace/scripts && npm i smf-rbox-helper)

Usage

var rboxDataRowRender = require("smf-rbox-helper").rboxDataRowRender;
//provides row render databinder

In order to use this databinder repeatbox templates has to be filled in some certain information. Every child object in repeatbox, if they are target to data-binding they have to have following properties set.

dataField

During assignment which property should be assigned. Name of this property as string is assigned to this value. Inside the library prototypes of some fundemental objects are set by the prototype.

• SMF.UI.TextBox: text
• SMF.UI.Image: image
• SMF.UI.Label: text

For those object you do not need to set this property.

dataKey

In data which key should be assigned to the field property? With dot notation data model object is traversed and assigned. For example:

• "id"
• "patient.number"
• "comments[0].text"

Examples

Data:

var data = [{
    "id": "23653713-6e1e-4410-94fc-e2a672edd6d7",
    "displayId": "23653713-6e1e-4410-94fc-e2a672edd6d7",
    "subject": "Automation Test - Case with attachment",
    "type": "NORMAL",
    "documentType": "Case",
    "clinicalReason": "Collaboration",
    "otherClinicalReason": null,
    "priority": "HIGH",
    "status": "FAILED",
    "creator": {
        "identifier": "a90765b2-3cbe-4319-aee0-1110a1671eaf",
        "name": {
            "given": [
                "CT",
                " "
            ],
            "family": [
                "Clinician"
            ],
            "prefix": [],
            "suffix": []
        }
    },
    "participants": [{
        "user": {
            "identifier": "a66e99e6-e9ab-4ea4-b4de-09ed1949e012",
            "name": {
                "given": [
                    "CT",
                    " "
                ],
                "family": [
                    "Radiologist"
                ],
                "prefix": [],
                "suffix": []
            }
        },
        "reviewed": false
    }, {
        "user": {
            "identifier": "a90765b2-3cbe-4319-aee0-1110a1671eaf",
            "name": {
                "given": [
                    "CT",
                    " "
                ],
                "family": [
                    "Clinician"
                ],
                "prefix": [],
                "suffix": []
            }
        },
        "reviewed": true
    }],
    "caseOrganization": {
        "id": "12",
        "name": "San Ramon"
    },
    "patient": {
        "identifier": "A16667_Alper",
        "name": {
            "given": [
                "J�rgen",
                "Klaus"
            ],
            "family": [
                "Smith"
            ],
            "prefix": null,
            "suffix": null
        },
        "birthDate": "19651018",
        "gender": "M"
    },
    "createdDate": 1455100690342,
    "updatedDate": 1455100694468
}, {
    "id": "f2876da3-9470-4ed5-ad70-920b8333fe94",
    "displayId": "f2876da3-9470-4ed5-ad70-920b8333fe94",
    "subject": "Automation Test - Case with attachment",
    "type": "NORMAL",
    "documentType": "Case",
    "clinicalReason": "Collaboration",
    "otherClinicalReason": null,
    "priority": "HIGH",
    "status": "FAILED",
    "creator": {
        "identifier": "a90765b2-3cbe-4319-aee0-1110a1671eaf",
        "name": {
            "given": [
                "CT",
                " "
            ],
            "family": [
                "Clinician"
            ],
            "prefix": [],
            "suffix": []
        }
    },
    "participants": [{
        "user": {
            "identifier": "a90765b2-3cbe-4319-aee0-1110a1671eaf",
            "name": {
                "given": [
                    "CT",
                    " "
                ],
                "family": [
                    "Clinician"
                ],
                "prefix": [],
                "suffix": []
            }
        },
        "reviewed": true
    }, {
        "user": {
            "identifier": "a66e99e6-e9ab-4ea4-b4de-09ed1949e012",
            "name": {
                "given": [
                    "CT",
                    " "
                ],
                "family": [
                    "Radiologist"
                ],
                "prefix": [],
                "suffix": []
            }
        },
        "reviewed": false
    }],
    "caseOrganization": {
        "id": "12",
        "name": "San Ramon"
    },
    "patient": {
        "identifier": "A16667",
        "name": {
            "given": [
                "J�rgen",
                "Klaus"
            ],
            "family": [
                "Smith"
            ],
            "prefix": null,
            "suffix": null
        },
        "birthDate": "19651018",
        "gender": "M"
    },
    "createdDate": 1455100677898,
    "updatedDate": 1455100681970
}];

Create your repeatbox and assign data

var rbox = new SMF.UI.RepeatBox({
    useActiveItem: true
});
page1.add(rbox);

Best approach to fill a RepeatBox is to use a template filler function

function fillTempalte(template, isActiveItem) {
    template.height = "20%";
    var lbl = new SMF.UI.Label({
        width: "90%",
        height: "100%",
        top: 0,
        left: "5%",
        fillColor: isActiveItem ? "AliceBlue" : "white",
        touchEnabled: false,
        backgroundTransparent: false
    });
    template.add(lbl);
    lbl.dataKey = "subject";
}
 
fillTempalte(rbox.itemTemplate, false);
fillTempalte(rbox.activeItemTemplate, true);

In order to show the data in this binding assign rowRender

rbox.onRowRender = rboxDataRowRender;
rbox.dataSource = data;
rbox.refresh(); //force draw once

Advanced Usage (setData)

For advanced databinding scenarios it is possible to use a setter function. Here is the example for setting name

function fullNameMaker(name) {
    name.given = name.given || [];
    name.family = name.family || [];
    var fullName = [name.prefix];
    fullName = fullName.concat(name.given, name.family);
    fullName.push(name.suffix);
    return fullName.filter(function(value) {
        if (value) {
            value = String(value).trim();
        }
        return Boolean(value);
    }).join(" ");
}
 
//a different example for template filling
function fillTempalte(template, isActiveItem) {
    template.height = "20%";
    var lbl = new SMF.UI.Label({
        width: "90%",
        height: "100%",
        top: 0,
        left: "5%",
        fillColor: isActiveItem ? "AliceBlue" : "white",
        touchEnabled: false,
        backgroundTransparent: false
    });
    template.add(lbl);
    lbl.dataKey = "creator.name";
    lbl.setData = function(name) { //argumet is fetch by the value of the dataKey
        this.text = fullNameMaker(name);
        //this object is the lbl itself
    };
}