Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    form.visibleWhen doesn't work with two forms in Window

    SmartClient Version: SNAPSHOT_v11.1d_2017-03-09/Enterprise Development Only (built 2017-03-09)

    Chrome in OSX

    Hello, please try this test case:

    Code:
    isc.DynamicForm.create({
        ID: "form1",
        width: 400,
        fields: [
            {title:"Text", type:"text", hint: "A plain text field", wrapHintText: false, name:"foo"},
            {title:"Color Picker", type:"color"},
            {title:"TextArea", type:"textArea"},
            {title: "Stacked Spinner", editorType: "SpinnerItem", writeStackedIcons: true,
             defaultValue: 5, min: 0, max: 10, step: 0.5, wrapTitle: false},
            {title: "Unstacked Spinner", editorType: "SpinnerItem", writeStackedIcons: false,
             defaultValue: 5, min: 0, max: 10, step: 0.5},
            {title: "Slider", name: "slider", editorType: "SliderItem", width: 180,
             minValue: 1, maxValue: 5, numValues: 5, height: isc.Browser.isTouch ? 52 : 36},
            {title: "LinkItem", type: "link", name: "link", height: 36, target: "javascript",
             click: "isc.say('Hello world!')", linkTitle: "<br>Click Me<br>"},
            {title: "Checkbox", type: "checkbox", height: 25},
            {title: "Radio Group", type: "radioGroup",
             valueMap: ["Option 1", "Option 2"]}
        ],
        values: { slider: 4 }
    });
    
    var valueMap = {
        "US" : "<b>United States</b>",
        "CH" : "China",
        "JA" : "<b>Japan</b>",
        "IN" : "India",
        "GM" : "Germany",
        "FR" : "France",
        "IT" : "Italy",
        "RS" : "Russia",
        "BR" : "<b>Brazil</b>",
        "CA" : "Canada",
        "MX" : "Mexico",
        "SP" : "Spain"
    }
    
    var valueIcons = {
        "US" : "US",
        "CH" : "CH",
        "JA" : "JA",
        "IN" : "IN",
        "GM" : "GM",
        "FR" : "FR",
        "IT" : "IT",
        "RS" : "RS",
        "BR" : "BR",
        "CA" : "CA",
        "MX" : "MX",
        "SP" : "SP"
    }
    
    isc.DynamicForm.create({
        ID: "form2",
    visibleWhen:{
            _constructor: "AdvancedCriteria",
            operator: "or",
            criteria: [
                {fieldName: "form1.values.foo", operator: "equals", value: "bar"}
            ]
        },
        width: 480,
        colWidths: [220, "*"],
        isGroup: true,
        groupTitle: "Select / Combo Controls",
        fields : [{
            name: "bugStatus", title: "Select", hint: "<nobr>A simple combobox</nobr>", 
            editorType: "ComboBoxItem",
            valueMap : {
                "cat" : "Cat",
                "dog" : "Dog",
                "giraffe" : "Giraffe",
                "goat" : "Goat",
                "marmoset" : "Marmoset",
                "mouse" : "Mouse"
            }
        },
        {
            name: "itemName", title: "Item Name", editorType: "ComboBoxItem", 
            optionDataSource: "supplyItem", pickListWidth: 250
        },
        {
            name: "selectItem", title: "Select", hint: "<nobr>A combobox with icons</nobr>",
            editorType: "SelectItem",
            valueMap : valueMap,
            valueIcons : valueIcons,
            imageURLPrefix : "flags/16/",
            imageURLSuffix : ".png"
        },
        {
            name: "selectItem2", title: "Select", hint: "<nobr>A combobox with styled entries</nobr>",
            editorType: "SelectItem",
            valueMap : {
                "red" : "<span style='color:#FF0000;'>Red</span>",
                "green" : "<span style='color:#00FF00;'>Green</span>",
                "blue" : "<span style='color:#0000FF;'>Blue</span>"
            }
        },
        {
            name: "selectItemMultipleGrid", title: "Select Multiple (Grid)",
            editorType: "SelectItem",
            multiple: true,
            multipleAppearance: "grid",
            valueMap : {
                "cat" : "Cat",
                "dog" : "Dog",
                "giraffe" : "Giraffe",
                "goat" : "Goat",
                "marmoset" : "Marmoset",
                "mouse" : "Mouse"
            }
        },
        {
            name: "selectItemMultiplePickList", title: "Select Multiple (PickList)",
            editorType: "SelectItem",
            multiple: true,
            multipleAppearance: "picklist",
            valueMap : {
                "cat" : "Cat",
                "dog" : "Dog",
                "giraffe" : "Giraffe",
                "goat" : "Goat",
                "marmoset" : "Marmoset",
                "mouse" : "Mouse"
            }
        }
        ]
    });
    
    isc.Window.create({
    maximized:true,
        items: [ form1, form2]
    });
    you'll see that both forms are shown, even if the visibleWhen of the 2nd form is not satisfied.

    If you replace the Window with an HLayout, it works (2nd form is hidden, unless you type 'bar' in the very first text item)

    #2
    The reason the use case provided doesn't work is that the rules engine is deciding that the items do not have a stable ID. We are still investigating why that should be, and why there is a difference between Window and Layout, but the quick workaround is to provide your Window container object with an explicit ID. Note, even when you have done this, this example also does not exhibit correct rules behavior when run standalone, because the ruleScope is being derived too early. You would need to make the child forms autoDraw: false to get correct behavior outside of the Showcase environment.

    Comment


      #3
      Thanks for the clarification.

      I don't know if it's related, but please see also this testcase, where I've got a TestForm class with a valuesManager:

      Code:
      isc.ValuesManager.create({
          ID: "testVM"
      });
      
      isc.defineClass("TestForm", "DynamicForm").addProperties({
          valuesManager: "testVM"
      });
      
      isc.TestForm.create({
          ID: "form1",
          width: 400,
          fields: [
              {title: "Text", type: "text", hint: "A plain text field", wrapHintText: false, name: "foo"}
          ]
      });
      
      isc.TestForm.create({
          ID: "form2",
          visibleWhen: {
              _constructor: "AdvancedCriteria",
              operator: "or",
              criteria: [
                  {fieldName: "form1.values.foo", operator: "equals", value: "bar"}
              ]
          },
          width: 480,
          colWidths: [220, "*"],
          isGroup: true,
          groupTitle: "Select / Combo Controls",
          fields: [
              {
                  name: "bugStatus", title: "Select", hint: "<nobr>A simple combobox</nobr>",
                  editorType: "ComboBoxItem",
                  valueMap: {
                      "cat": "Cat",
                      "dog": "Dog",
                      "giraffe": "Giraffe",
                      "goat": "Goat",
                      "marmoset": "Marmoset",
                      "mouse": "Mouse"
                  }
              }
          ]
      });
      
      isc.Window.create({
          ID: "testWindow",
          maximized: true,
          items: [form1, form2]
      });
      if I run it I get this error:
      Error evaluating your changes:

      ErrorType: TypeError
      ErrorMessage: _1.valuesManager.removeMember is not a function
      but then it seems to work.

      If I put valuesManager: "testVM" directly in the two form instances, then it doesn't show the error.

      Comment


        #4
        This isn't related, and it isn't really a problem, it's just a peculiar usage. The issue is the combination of setting the valuesManager in TestForm's instance defaults, and setting that default to an ID string rather than the actual ValuesManager instance. As a general approach, SmartClient tries to be helpful and flexible in what it will allow in parameters and attributes, so the fact you have used the ID rather than the object is OK; SmartClient spots this during the DynamicForm's initialization and uses the ID to look up the VM instance. At this point, everything is fine: the form instance "form1" has a real ValuesManager object as its "valuesManager" property.

        Now, further downstream in the initialization flow, the form's initializeValuesManager() function is called to properly set up the link between the form and the VM (so far, all that's happened is an object being assigned to a property name). The first thing this method does is copy the form's valuesManager setting and then clear it out, so it can reassign the VM cleanly through the VM's addMember() API. We do this to ensure that everything is done in the correct order - it is necessary because the relationship between Canvases and ValuesManagers is two-way (you can set valuesManager on a Canvas and you can call addMember(Canvas) on a valuesManager). This is where the second part of the combination comes in. Because you specified the "testVM" ID on the TestForm definition itself, rather then in the create() of a particular TestForm instance, that ends up on TestForm's prototype. When you make a reference to an object property in Javascript, the engine looks at the object's prototype if it does not find the property in the object's so-called "own properties". So because the ValuesManager object has been cleared from the object's own properties, we pick up the values from the prototype, which is the string "testVM".

        The short version of this is: set the valuesManager at the instance level (ie, in the isc.TestForm.create() call) rather than in the defaults

        Comment


          #5
          Just to let you know, we have changed the framework to cope with this slightly odd usage (6.1 / 11.1 only)

          Comment


            #6
            The original problem you reported with the Rules Engine has been fixed back to SmartClient 10.1p, and it should be in the nightly builds dated 2017-03-16 and beyond.

            Comment


              #7
              SmartClient Version: SNAPSHOT_v11.1d_2017-03-19/Enterprise Development Only (built 2017-03-19)

              Thanks for the detailed explanation, and I see that the bug it's fixed, thank you very much.

              Comment

              Working...
              X