Smartview equivalent to Classic views Channel

There will be a new Smart UI feature showing events from various feeds. It is not Channels, but it might replace it in some cases. I should not spoil this for you before 21.3 gets released ;-)

This is more an off-topic here, sorry. Yes, the layouts to choose form in the Perspective Manager (flow, l-c-r, tabbed) are very limiting. The trouble with the full configurability of the widget placeholder was the big effort to configure them properly.

All layouts use the concept from Bootstrap grid internally. For each cell, you set the pairs of width a resolution to optimise the widget size for every screen size. The width is entered in 1/12 of the screen size. The height in 1/4. The screen sizes are xs, sm, md, lg, xl, xxl. For example a tile like Favourites is kept from growing too wide on bigger screens by decreasing its width: xs-12, sm-6, md-4. xl-3. And there are parameters to create rows to allow high sidebars, to change the order of the cells on smaller devices, to introduce an offset or to hide a cell. Such grid concept can be comprehended by a developer creating a custom layout, but a usual business admin needs something simple and quick to use. Hence the simplified layouts, which use preconfigured zones made of the grid cells to place the widgets to.

If you code Smart UI extension, you can supply your own perspective layout as JSON. For example, showing this perspective:

can be achieved by the following configuration:

{
  "type": "grid",
  "options": {
    "rows": [
      {
        "columns": [
          {
            "sizes": { "sm": 3, "lg": 2, "xl": 1 },
            "heights": { "xs": "full" },
            "widget": {
              "type": "csui/widgets/placeholder",
              "options": { "label": "Side", "color": "#fff", "bgcolor": "#080" }
            }
          },
          {
            "sizes": { "sm": 9, "lg": 10, "xl": 11 },
            "heights": { "xs": "full" },
            "rows": [
              {
                "columns": [
                  {
                    "sizes": {},
                    "heights": { "xs": "quarter" },
                    "widget": {
                      "type": "csui/widgets/placeholder",
                      "options": { "label": "Top", "color": "#fff", "bgcolor": "#080" }
                    }
                  },
                  {
                    "sizes": { "sm": 9, "md": 8, "xl": 6 },
                    "widget": {
                      "type": "csui/widgets/placeholder",
                      "options": { "label": "Two", "color": "#fff", "bgcolor": "#880" }
                    }
                  },
                  {
                    "sizes": { "sm": 6, "md": 4, "xl": 3 },
                    "widget": {
                      "type": "csui/widgets/placeholder",
                      "options": { "label": "Two", "color": "#fff", "bgcolor": "#088" }
                    }
                  },
                  {
                    "sizes": { "sm": 6, "md": 4, "xl": 3 },
                    "widget": {
                      "type": "csui/widgets/placeholder",
                      "options": { "label": "Three", "color": "#fff", "bgcolor": "#008" }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}