6.1p: Unnecessary fetch for SelectItems in readOnly:true DynamicForm

[Blama]

Hi Isomorphic,

please see this BuiltInDS-based testcase (v11.1p_2018-12-04):

BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.AdvancedCriteria;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.ReadOnlyDisplayAppearance;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        DataSource.get("employees").invalidateCache();
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("SelectItem showing outer border even if in read only mode" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        final DynamicForm employeesForm = new DynamicForm();

        employeesForm.setHeight100();
        employeesForm.setAutoFetchData(false);
        employeesForm.setCanEdit(false);
        employeesForm.setReadOnlyDisplay(ReadOnlyDisplayAppearance.STATIC);
        employeesForm.setDataSource(DataSource.get("employees"));

        FormItem employeeId = new FormItem("EmployeeId");
        employeeId.setCanEdit(false);

        FormItem name = new FormItem("Name");
        name.setCanEdit(false);

        FormItem gender = new FormItem("Gender");

        SelectItem reportsTo = new SelectItem("ReportsTo");
        ListGrid props = new ListGrid();
        props.setDrawAllMaxCells(0);
        reportsTo.setPickListProperties(props);
        reportsTo.setOptionDataSource(DataSource.get("employees"));

        FormItem job = new FormItem("Job");

        employeesForm.setFields(employeeId, name, gender, reportsTo, job);
        employeesForm.fetchData(new AdvancedCriteria(new Criterion(employeeId.getName(), OperatorId.EQUALS, 192)));
        w.addItem(employeesForm);
        w.show();
    }
}

employees.ds.xml:

<DataSource 
    ID="employees"
    serverType="sql"
    tableName="employeeTable"
    recordName="employee"
    testFileName="/examples/shared/ds/test_data/employees.data.xml"
    titleField="Name"
>
    <fields>
        <field name="userOrder"       title="userOrder"       type="integer"  canEdit="false"    hidden="true"/>
        <field name="Name"            title="Name"            type="text"     length="128"/>
        <field name="EmployeeId"      title="Employee ID"     type="integer"  primaryKey="true"  required="true"/>
        <field name="ReportsTo"       title="Manager"         type="integer"  required="true" 
               foreignKey="employees.EmployeeId"  rootValue="1" detail="true" displayField="ReportsToName" />
        <field name="ReportsToName"   includeFrom="employees.Name"></field>
        <field name="Job"             title="Title"           type="text"     length="128"/> 
        <field name="Email"           title="Email"           type="text"     length="128"/>
        <field name="EmployeeType"    title="Employee Type"   type="text"     length="40"/>
        <field name="EmployeeStatus"  title="Status"          type="text"     length="40"/>
        <field name="Salary"          title="Salary"          type="float"/>
        <field name="OrgUnit"         title="Org Unit"        type="text"     length="128"/>
        <field name="Gender"          title="Gender"          type="text"     length="7">
            <valueMap>
                <value>male</value>
                <value>female</value>
            </valueMap>
        </field>
        <field name="MaritalStatus"   title="Marital Status"  type="text"     length="10">
            <valueMap>
                <value>married</value>
                <value>single</value>
            </valueMap>
        </field>
    </fields>
</DataSource>

As you can see in the Developer Console screenshot, the SelectItem also does a fetch for it's picklist, even if the form is not editable.



Best regards
Blama

[Blama]

Hi Isomorphic,

I just saw that this does not happen in 12.0p, where the pickList fetch is always (=even in read/write mode) done only after I open the pickList (=never in read-only mode), so this is non-issue for me.

Best regards
Blama

[Blama]

Hi Isomorphic,

I had a look at this thread again as I saw unexpected DynamicForm-FormItem fetches in recent 12.0p, but it turned out to be my mistake.

I did see changes in v12.0p_2019-08-08, though. First of all, there seems to be a (recent?) improvement, where you don't do a SelectItem fetchMissingValueReply-request, when the data is in the pickList's fetchRemoteDataReply. Pretty cool. I saw this in the 2nd DynamicForm and to see the difference one has to change sort direction of the 2nd DynamicForm's initialSort.

If you wanted to improve this even further (absolutely no priority for me) you could also wait with the fetchRemoteDataReply-request you get in the 1st DynamicForm on "canEdit"-Button click until the DynamicForm is both, canEdit:true and disabled:false.

Showcase sample:

isc.DynamicForm.create({ 
    ID: "dynamicForm",
    dataSource: "employees",
    canEdit:false, readOnlyDisplay:"static",
    disabled:true,
    width: 800,
    fields:[
       {name: "header", type:"header", value:"Form 1"},
       {name: "userOrder"},
       {name: "EmployeeId"},
       {name: "ReportsTo",
          editorType:"SelectItem",
          optionDataSource:"employees", 
          valueField:"EmployeeId",
          displayField:"Name",
          fetchDisplayedFieldsOnly:true,
          pickListWidth:350,
          pickListFields:[
              {name:"Name"},
              {name:"Email"}
          ],
          pickListProperties: {
            drawAllMaxCells: 1,
            initialSort: [
              {property: "Name", direction: "descending"},
              {property: "Email", direction: "descending"}
            ]
         }
       },
       {name: "Job"},
       {name: "Email"},
       {name: "EmployeeType"},
       {name: "EmployeeStatus"},
       {name: "Salary"},
       {name: "OrgUnit"},
       {name: "Gender"},
       {name: "MaritalStatus"},
    ]
});

isc.DynamicForm.create({ 
    ID: "dynamicForm2",
    dataSource: "employees",
    width: 800,
    fields:[
       {name: "header", type:"header", value:"Form 2 with ommited fetchMissingValueReply"},
       {name: "userOrder"},
       {name: "EmployeeId"},
       {name: "ReportsTo",
          editorType:"SelectItem",
          optionDataSource:"employees", 
          valueField:"EmployeeId",
          displayField:"Name",
          fetchDisplayedFieldsOnly:true,
          pickListWidth:350,
          pickListFields:[
              {name:"Name"},
              {name:"Email"}
          ],
          pickListProperties: {
            drawAllMaxCells: 1,
            initialSort: [
              {property: "Name", direction: "ascending"}, // One request more with descending
              {property: "Email", direction: "ascending"}
            ]
         }
       },
       {name: "Job"},
       {name: "Email"},
       {name: "EmployeeType"},
       {name: "EmployeeStatus"},
       {name: "Salary"},
       {name: "OrgUnit"},
       {name: "Gender"},
       {name: "MaritalStatus"},
    ]
});


isc.IButton.create({
    ID: "toggleEditBtn",
    title: "Toggle canEdit",
    click: "dynamicForm.setCanEdit(!dynamicForm.canEdit)"
});

isc.IButton.create({
    ID: "toggleDisabledBtn",
    title: "Toggle disabled",
    click: "dynamicForm.setDisabled(!dynamicForm.disabled)"
});


isc.IButton.create({
ID:"printBtn",
            autoDraw: false,
            title: "Print Preview",
            click: "isc.Canvas.showPrintPreview([dynamicForm])"
        });


isc.HStack.create({
    ID: "buttons",
    height: 24,
    membersMargin: 10,
    members: [toggleEditBtn, toggleDisabledBtn, printBtn]
});

isc.VLayout.create({
    width: 800,
    membersMargin: 10,
    members: [buttons, dynamicForm, dynamicForm2]
});

dynamicForm.fetchData({ fieldName: "EmployeeId", operator: "equals", value: "192" });
dynamicForm2.fetchData({ fieldName: "EmployeeId", operator: "equals", value: "192" });

Best regards
Blama