DataForm: how to select fields to display on the form


#1

I need to select the fields/properties to display on the form, but I could not find a way other than explicitly add <TKEntityProperty hidden="true"> for each of the fields to ignore. In my case I know the fields I want, but have no clue to additional properties/fields that might exist in the [source].

I have a <TKEntityProperty> for the fields I want on the form, anything else on the [source] I’d like to be hidden.

If that is not yet supported, I’d like to ask for that feature. Maybe a flag on to only include items that have a <TKEntityProperty>!

Here is the template I’m using for RadDataForm:

              <RadDataForm tkExampleTitle [source]="fieldData">
                    <TKEntityProperty *ngFor='let field of fieldList; let i=index' 
                                        tkDataFormProperty 
                                        name="{{field.name}}" 
                                        displayName="{{field.title}}"
                                        index="{{i}}"
                                        readOnly="true"
                                        >
                        <TKPropertyEditor *ngIf="field.type === 'string'" tkEntityPropertyEditor type="MultilineText">
                            <TKPropertyEditorStyle tkPropertyEditorStyle labelPosition="top" labelFontStyle="Italic" labelTextColor="#00695c" separatorColor="#00695c" strokeColor="Red"></TKPropertyEditorStyle>
                        </TKPropertyEditor>
                        <TKPropertyEditor *ngIf="field.type === 'number'" tkEntityPropertyEditor type="Number">
                            <TKPropertyEditorStyle tkPropertyEditorStyle labelPosition="top" labelFontStyle="Italic" labelTextColor="#00695c" separatorColor="#00695c" strokeColor="Red"></TKPropertyEditorStyle>                                                                
                        </TKPropertyEditor>
                        <TKPropertyEditor *ngIf="field.type === 'float'" tkEntityPropertyEditor type="Number">
                            <TKPropertyEditorStyle tkPropertyEditorStyle labelPosition="top" labelFontStyle="Italic" labelTextColor="#00695c" separatorColor="#00695c" strokeColor="Red"></TKPropertyEditorStyle>                                                                
                        </TKPropertyEditor>
                        <TKPropertyEditor *ngIf="field.type === 'boolean'" tkEntityPropertyEditor type="Switch">
                                <TKPropertyEditorStyle tkPropertyEditorStyle labelPosition="left" labelFontStyle="Italic" labelTextColor="#00695c" separatorColor="#00695c" strokeColor="Red"></TKPropertyEditorStyle>
                        </TKPropertyEditor>
                        <TKPropertyEditor *ngIf="field.type === 'Date'" tkEntityPropertyEditor type="DatePicker">
                                <TKPropertyEditorStyle tkPropertyEditorStyle labelPosition="top" labelFontStyle="Italic" labelTextColor="#00695c" separatorColor="#00695c" strokeColor="Red"></TKPropertyEditorStyle>
                        </TKPropertyEditor>
                        <TKPropertyEditor *ngIf="field.type === 'Time'" tkEntityPropertyEditor type="TimePicker">
                                <TKPropertyEditorStyle tkPropertyEditorStyle labelPosition="top" labelFontStyle="Italic" labelTextColor="#00695c" separatorColor="#00695c" strokeColor="Red"></TKPropertyEditorStyle>
                        </TKPropertyEditor>
                    </TKEntityProperty>
                </RadDataForm>

For now my solution is to partially clone the source object into another one that has only the desired fields. But that seems like a waste of time (and code), no?

TIA
julio


#2

Any easier solution for this, except explicitly setting fields to “hidden”?


#3

You can also hide a field by adding hidden flag to your meta data. In the below example, age field is hidden using meta data.


#4

Thank you for the example.


#5

When using the meta-data JSON, how to group elements, and specify columnIndex?

Thank you.


#6

You have full list of supported properties documented here.

http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/DataForm/GettingStarted/dataform-start-properties

A similar thread you might want to checkout


#7

I’ve tried as suggested in the documentation as well as in that other thread without any luck of displaying groups in RadDataForm.

this is my meta-data

screeningMetadata: any = {
“isReadOnly”: false,
“commitMode”: “Immediate”,
“validationMode”: “Immediate”,
“propertyAnnotations”:
[
{
“name”: “patientId”,
“displayName”: “patientId”,
“index”: 0,
“group”: “Patient”
},
{
“name”: “nationalId”,
“displayName”: “ID”,
“index”: 1,
“group”: “Patient”
},
{
“name”: “firstName”,
“displayName”: “firstName”,
“index”: 2,
“group”: “Patient”
},
{
“name”: “middleName”,
“displayName”: “middleName”,
“index”: 3,
“group”: “Patient”
},
{
“name”: “facilityName”,
“displayName”: “facilityName”,
“index”: 4,
“group”: “Patient”
},
{
“name”: “lastName”,
“displayName”: “lastName”,
“index”: 5,
“group”: “Patient”
}
]
};

And this is HTML

<RadDataForm tkToggleNavButton [source]=“questionnaire” row=“0” (loaded)=“onFormLoaded($event)”
(propertyCommitted)=“onPropertyCommitted($event)” [metadata]=“screeningMetadata”>>

I’ve also tried with “groupName”: “Patient”.


#8

You got to take a closer look in the examples, you have to declare the group in your HTML before you could reference it’s name in your meta data.


#9

You mean I’ve to declare groups and entities in the HTML as well as in meta-data if I want to use groups?


#10

Yes, you have to declare the groups in HTML to reference it from meta data. Entities / Editors need not to be declared.


#11

Thank you,

I’ve changed HTML to this

    <RadDataForm tkToggleNavButton [source]="questionnaire" row="0" (loaded)="onFormLoaded($event)"
                 (propertyCommitted)="onPropertyCommitted($event)" [metadata]="screeningMetadata">
        <TKPropertyGroup tkDataFormGroups collapsible="true" name="Patient" hidden="false">
        </TKPropertyGroup>
    </RadDataForm>

and its displaying the group on Android, but not on iOS, on iOS its displaying blank page, and I see below error message in the console

CONSOLE ERROR [native code]: ERROR TypeError: undefined is not an object (evaluating ‘group.properties.length’)

I’m also assuming not all entities needs to have a groupName?


#12

When I declare entities in both HTML and meta-data then its working on iOS as well. I’m not sure what is the reason behind it, and its not well documented when to use HTML declarations and when to use meta-data.