Hi, I'm Seb McMillan from the platform adoption team. Today, for the Community Challenge, we're going to look at some of the new layout capabilities we've recently introduced into UX. I'll give you a quick walkthrough of what we can do, and then it's over to you for the Challenge.
Here's a page I built and used in a few webinars. I originally put it together to show the transition from classic dashboards to UX. I was initial quite pleased with it, I think it gives a nice looking layout and clear view of the information.
It is a good example of the type landing page you could create, but it could be better. Let's have a look at the new layout facilities we have introduced. First of all, you'll notice the view between cards has changed slightly — I now have the ability to position things around. As you can see, We've now got 12 columns rather than the previous 6, which gives a lot more flexibility for positioning.
I now have the ability to create gaps between cards without needing to use a dummy card. Previously you'd have to use a blank text card just to hold that space; now I can just position my cards wherever I want on the page. It's a lot more intuitive.
It gives you more options around how you can organize the number of cards you can have on a page and how you position them — say, for example, you have 5 cards in a row. That could be quite difficult in the past, and now this capability lets us lay them out evenly. Now I can resize them and have even-spaced cards, which is something you just couldn't do before with 6 columns — it opens up a lot of flexibility.
Previously I could only have 3 nested cards on each row, which was again limiting in term of managing the layouts. If you had a large Grid card on one side and wanted charts, commentary etc alongside it; you could only fit 3 cards. Any more cards had to go on the next row which didn’t look good.
Now the layout is quite different — we can put up to 8 cards here opening up a cleaner and more intuitive layout, getting much closer to the way you'd like it to be.
You also now have the ability to directly duplicate a card. Previously you'd have to make a template of the card and drop that template onto the page. Now, if I duplicate it — literally, we'll see we've got an extra item here — the new card has the same formatting on it as well, so I can just take that, edit it, move it around, and it's done. This is a lot more intuitive and quicker than having to create another card from scratch or to create and apply a template to the page each time.
The next update is the ability to add a background to each row, I can put a plain background colour is our corporate blue standard here. You can also use in an image like background image like a logo or a combination of image and background.
I can change the alignment of the image and I can stretch it so it takes up the whole width of the row, or fit it to the vertical size of the row. I can use the background color to fill in around an image, here I used a similar background color there, which is quite nice. This enhance make board look a more better appealing and professional.
Originally we only had the background toggle on the text cards, allowing us make transparent text cards for layout spacing, but now other cards can be transparent as well, all the cards will eventually have this capabilities.
In the past I couldn't turn the background off, so it the backgrounds didn't show through which wasn’t always ideal. Now if I turn the background I can see the background image but can't read the text, but I can fix that by changing the format colors. When I adjust a few things to make it make the test clear and introduce an even background color you can see it just ties everything together.
So the key takeaway here is we've brought a lot of the formatting you'd get in a management report page many of the nice styling options, while still retaining the interactivity you'd get from board page.
Lastly, we've also introduced — something I'm really pleased to bring — expand/collapse on a grid. As long as a grid has a single dimension on a row, we can apply expand/collapse to it.
You go into edit, into the grid options, and you'll see we've got an expand option there.
So I can go there and you'll see I have my collapse — it's recognized and renders nicely. That makes it a lot nicer. So what does this mean in terms of pages?
Practical Demo
If I go back to my landing page, like I said — it's fine, but it's pretty informative, but something's just missing, I want to make it really pop.
Theability to use background cards with images. We've got justification from top to bottom, so I can put my logo in there. There's no padding, so each card has more flexibility in how it's sized and aligned. So I've got the logo at the top of my page, I set the background, making it corporate blue and the cards transparent, and played with the fonts, sizing, and coloring just to make sure text and info still stood out.
I you can see this looks much more engaging and more professional, more like a corporate web page rather than a standard dashboard.
I took same design that across to this workforce planning page tooI, I used a same image for the background colous. I used the asset library for saving images and pallets to give a consistent look across the different pages in terms of colours and format.
With expand and collapse if you've set the level of expansion, it'll remember what you were doing last time you used it as well, which is great and I can navigate the levels in a much more predictable and intuitive way.
What we really want to see is what you can do with it. So for the Community Challenge, let's see how you think you can improve your dashboards. Whatever you think would be useful. I'd absolutely love you to share some of that. If you've got images or videos you want to post to the community, that would be brilliant. Obviously, we don't want you to show any confidential information, so you can mitigate that blur it out, or put zero values in, perhaps. Even if you've got ideas for dashboards you're not actually using but would like to build in a different way any examples would be great, just so we can see how you all are are using dashboards, and so you can see what others are doing and spark ideas off each other. I’m looking forward to your challenge entries.
Summary
This is an Anaplan demo introducing new UX page layout capabilities to kickoff our Community Challenge. Key features demonstrated:
- Grid layout: moved from 6 columns to 12 columns, giving much finer control over card positioning.
- Card spacing: ability to create gaps between cards directly, instead of using blank/dummy cards to force spacing.
- Card density: up to 8 cards per row now supported (previously limited to around 3 nested cards per row), removing a layout constraint for pages mixing large charts/tables with commentary.
- Card duplication: cards can now be duplicated directly with formatting intact, instead of manually rebuilding via templates — faster and more intuitive.
- Backgrounds: cards and pages can have background colors or images (including logos), with control over alignment, stretch/fit, and transparency — enabling more "corporate report" styling while keeping dashboard interactivity.
- Transparent cards: text and commentary/report cards can be made transparent so background styling shows through.
- Grid expand/collapse: grids with a single dimension on a row can now expand/collapse, and the UI remembers the expand/collapse state a user left it in.
- Asset library: background images can be pulled from a shared asset library for a consistent look across pages.
