Flex behaviour after upgrade 8.0.3 stable version

#1

Is the way a flex view is handled changed in 8.0.3?
because it looks like this now:

while grow is set.
in 8.0.2 i did get the expected behaviour.

0 Likes

#2

Are you using a Flex Repeater, or a Flex Container?

We did make some adjustments to how Flex Repeaters display instanced Views, but our changes were meant to repair something that had regressed from a previous change, so Flex Repeaters should be behaving correctly now.

Could you copy the Flex whatever you’re using and paste the copied JSON into this thread?

0 Likes

#3

It is with a flex repeater.
The flex repeater repeats with the width of the view now, even when the view is configured to grow.
On another view in this project I just changed the width of the view to fit in the window, but isn’t a flex view just the thing we want to be flexible in width and height when we set it to grow/shrink?
In 8.0.2 everything works as normal, but in 8.0.3 i got an extra empty space on my view(with the flex repeater on it).

Here the json for the page where the flex repeater is on:

{
  "custom": {},
  "events": null,
  "params": {
    "Overview": false
  },
  "permissions": null,
  "propConfig": {
    "params.Overview": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 500,
      "width": 300
    }
  },
  "root": {
    "children": [
      {
        "events": {
          "dom": {
            "onClick": {
              "config": {
                "script": "\tself.session.custom.SubMenu \u003d False"
              },
              "scope": "G",
              "type": "script"
            }
          }
        },
        "meta": {
          "name": "Button"
        },
        "position": {
          "grow": 0,
          "shrink": 1
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "expression": "!{view.params.Overview}"
              },
              "type": "expr"
            }
          },
          "position.basis": {
            "binding": {
              "config": {
                "expression": "if(toboolean({view.params.Overview}),\u00270px\u0027,\u002750px\u0027)"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "borderStyle": "double",
            "borderWidth": "2px",
            "classes": "OverviewButton"
          },
          "text": "Terug"
        },
        "type": "ia.input.button"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "basis": "2px",
          "grow": 0,
          "shrink": 1
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "FlexRepeater"
        },
        "position": {
          "basis": "320px",
          "grow": 1,
          "shrink": 0
        },
        "propConfig": {
          "props.instances": {
            "binding": {
              "config": {
                "queryPath": "Pages",
                "returnFormat": "json"
              },
              "type": "query"
            }
          }
        },
        "props": {
          "direction": "column",
          "path": "Shared Pages/Main Menu/Templates/SubMenuButton"
        },
        "type": "ia.display.flex-repeater"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

and here the json for the view of the flex itself:

{
  "custom": {},
  "events": null,
  "params": {
    "Page": "test1",
    "PageID": "value",
    "StatusTagPath": ""
  },
  "permissions": null,
  "propConfig": {
    "custom.key": {
      "persistent": true
    },
    "params.Page": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.PageID": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.StatusTagPath": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 50,
      "width": 200
    }
  },
  "root": {
    "children": [
      {
        "events": {
          "dom": {
            "onClick": [
              {
                "config": {
                  "params": {
                    "Page": "{view.params.Page}",
                    "PageID": "{view.params.PageID}"
                  },
                  "view": "Overview/ComponentsOverview"
                },
                "scope": "C",
                "type": "nav"
              },
              {
                "config": {
                  "script": "\t# Write your script here\n\tPage \u003d self.view.params.Page\n\tPageID \u003d self.view.params.PageID\n\tself.session.custom.PageName \u003d Page\n\n\tsystem.perspective.navigate(view \u003d \u0027Overview/ComponentsOverview\u0027, params \u003d {\u0027Page\u0027:Page,\u0027PageID\u0027:PageID})"
                },
                "enabled": false,
                "scope": "G",
                "type": "script"
              },
              {
                "config": {
                  "id": "menu",
                  "type": "close"
                },
                "scope": "C",
                "type": "dock"
              },
              {
                "config": {
                  "script": "\tself.session.custom.PageName \u003d self.view.params.Page\n"
                },
                "scope": "G",
                "type": "script"
              }
            ]
          }
        },
        "meta": {
          "name": "Button"
        },
        "position": {
          "basis": "43px",
          "grow": 8,
          "shrink": 1
        },
        "propConfig": {
          "custom.ExecuteScript": {
            "binding": {
              "config": {
                "expression": "now(3000)"
              },
              "type": "expr"
            },
            "onChange": {
              "enabled": null,
              "script": "\tdef TagpathStatus(Tagstring):\n\t\ttags \u003d Tagstring.split(\"+\")\t\t\n\t\tstatus \u003d 4\n\t\tfor tag in tags:\n\t\t\ttagvalue \u003d system.tag.readBlocking([tag])[0].value\n\t\t\t\n\t\t\tif tagvalue \u003d\u003d 0 or tagvalue \u003d\u003d 3:\n\t\t\t\treturn 0\n\t\t\telif tagvalue \u003d\u003d 1 or tagvalue \u003d\u003d 4:\n\t\t\t\tstatus \u003d 1\t\t\n\t\t\telif status \u003d\u003d 2 or tagvalue \u003d\u003d 5:\n\t\t\t\tstatus \u003d 2\t\n\t\treturn status \n\t\n\tColor \u003d \u0027#000000\u0027\n\tif self.view.params.StatusTagPath !\u003d \"\":\t\n\t\tif self.view.params.Page \u003d\u003d \"Thiopaq\":\n\t\t\tif system.tag.readBlocking([\"[Ecco]Paques EcoS/ECO Aan\"])[0].value \u003d\u003d 1:\n\t\t\t\tColor \u003d \u0027#FF0000\u0027\n\t\t\telse:\n\t\t\t\tColor \u003d \u0027#00FF00\u0027\n\t\telse:\n\t\t\tif self.view.params.Page \u003d\u003d \"Decanter\":\n\t\t\t\tif system.tag.readBlocking([\"[Ecco]Pieralisie/Decanter Alrm\"])[0].value \u003d\u003d 1:\n\t\t\t\t\tColor \u003d \u0027#FF0000\u0027\n\t\t\t\telse:\n\t\t\t\t\tColor \u003d \u0027#FFFF00\u0027\n\t\t\telse:\n\t\t\t\tif TagpathStatus(self.view.params.StatusTagPath) \u003d\u003d 0:\n\t\t\t\t\tColor \u003d \u0027#FF0000\u0027\n\t\t\t\telif TagpathStatus(self.view.params.StatusTagPath) \u003d\u003d 1:\n\t\t\t\t\tColor \u003d \u0027#FFFF00\u0027\n\t\t\t\telif TagpathStatus(self.view.params.StatusTagPath) \u003d\u003d 2:\n\t\t\t\t\tColor \u003d \u0027#00FF00\u0027\n\t\t\t\telse:\n\t\t\t\t\tColor \u003d \u0027#FF00FF\u0027\n\n\tself.props.style.borderColor \u003d Color"
            }
          },
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.Page"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "style": {
            "borderColor": "#000000",
            "classes": "OverviewButton"
          }
        },
        "scripts": {
          "customMethods": [
            {
              "name": "TagpathStatus",
              "params": [
                "Tagstring"
              ],
              "script": "\t\n\ttags \u003d Tagstring.split(\"+\")\n\t\n\tstatus \u003d 4\n\tfor tag in tags:\n\t\ttagvalue \u003d system.tag.readBlocking([tag])[0].value\n\t\t\n\t\tif tagvalue \u003d\u003d 0 or tagvalue \u003d\u003d 3:\n\t\t\treturn 0\n\t\telif tagvalue \u003d\u003d 1 or tagvalue \u003d\u003d 4:\n\t\t\tstatus \u003d 1\t\t\n\t\telif status \u003d\u003d 2 or tagvalue \u003d\u003d 5:\n\t\t\tstatus \u003d 2\n\t\t\t\n\t\t\t\n\t\t\t\n\treturn status "
            }
          ],
          "messageHandlers": []
        },
        "type": "ia.input.button"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "basis": "2px",
          "grow": 0,
          "shrink": 0
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}
0 Likes

#4

After looking at your Flex Repeater, I think it was working for you previously because you were falling back on unintended behavior caused by a bug which we have since fixed. In your Flex Repeater, set FlexRepeater.props.useDefaultWidth to false.

0 Likes