Skip to content

RecordEditWindow Component

Jump to bottom
Julio Carneiro edited this page Dec 15, 2017 · 2 revisions

The RecordList Component gives you the ability to create or edit records in the 4D Database. For that purpose, RecordList uses a RecordEditWindow extension component.

So, your record editing form dialog components should extend RecordEditWindow.

Properties

A RecordEditWindow instance includes the following properties:

  • currentRecord: the current record being edited, or created; this should be an instance of your table's Data Model; you can bind your component's template input fields the the currentRecord fields.
  • dialog: the edit window dialog instance

Functions

RecordEditWindow class includes a saveRecord function, which can be called from your component's HTML template.

Dialog Configuration

You can include a dialog configuration static variable, named dialogConfig, and that will be used to configure the dialog window showing your component.

Sample

Here is a sample RecordEditWindow component:

import { Component, AfterViewInit } from '@angular/core';

import { RecordEditWindow } from 'js44d';
import { ModalConfig } from 'js44d';
import { GenomeMap } from '../dataModels/DB/genomeMap';

@Component({
    moduleId: module.id,
    selector: 'genome-map',
    templateUrl : 'genomeMapInfoDialog.html' 
})

export class GenomeMapInfoDialog extends RecordEditWindow implements AfterViewInit {
    public static dialogConfig: ModalConfig = <ModalConfig>{
            actions:['Maximize', 'Minimize', 'Close'], 
            position: {top:100, left:100},selfCentered:true,
            title:'Gene Details',
            isResizable:false,
            width:1000, height:510
        };
    
    currentRecord: GenomeMap;
    

    ngAfterViewInit() {
        this.dialog.setTitle('Gene Details: '+this.currentRecord.GeneName); // put our Gene Name on the dialog window title
    }


}

And the sample HTML template would look like:

<div class="formPanel">
    <fieldset class="titledGroupBox">
        <legend class="formHeaderSmall">Gene Details</legend>
        <div style="height:32px;">
            <span>
                <label class="fieldPromptBold" style="width:115px;">Gene ID</label>
                <input type="text" class="fieldEntry" [(ngModel)]="currentRecord.GeneId"  size="12" disabled/>
            </span>
            <span style="padding-left:10px;">
                <label class="fieldPromptBold">Gene Name</label>
                <input type="text" class="fieldEntry" size="80" [(ngModel)]="currentRecord.GeneName" />
            </span>
        </div>
        <div style="height:32px;">
            <span>
                <label class="fieldPromptBold" style="width:115px;">Vector</label>
                <fourd-dropdown class="fieldEntry" listName="GMM_GeneVectors" [(selectedValue)]="currentRecord.Vector" (change)="currentRecord.Vector = $event.target.value"></fourd-dropdown>
            </span>
            <span style="padding-left:30px;">
                <label class="fieldPromptBold">Cluster</label>
                <fourd-dropdown class="fieldEntry" listName="GMM_GeneClusters" [(selectedValue)]="currentRecord.Cluster" (change)="currentRecord.Cluster = $event.target.value"></fourd-dropdown>
            </span>
        </div>
...
Clone this wiki locally