Portal Designer¶
A portal is built in two editors. The design editor is where you build the frame that every page sits in: the navigation, the header, the footer and the theme. The portal editor is where you build the portal itself: its pages, the widgets on them, and the data behind them.
The two are split so that one design can serve many portals. Build the navigation rail once in a design, and every portal on that design gets it. Change the rail later, publish the design, and move the portals to the new version.
| Editor | Opens from | What you build there |
|---|---|---|
| Design editor | Designs in the Portals app | The shell every page sits in: layouts and sub-layouts with their navigation, header and framing, plus the parameters and data sources all pages share. The design also names the theme |
| Portal editor | Portals in the Portals app | The portal itself: its pages, windows and modules, each page's widgets, data sources and parameters, and which design the portal uses |
Both editors share the same canvas, widget library and properties panel, so what you learn in one applies in the other.
In this section¶
| Page | What it covers |
|---|---|
| Designs | The Portal Designs list and the design editor |
| Layouts and Sub-layouts | How a layout frames a page, where page content goes, nesting layouts, and what a layout can share |
| Portals and Pages | The Portals list and the portal editor: pages, routes, modules, windows and the canvas |
| Versions and Publishing | Drafts, publishing, version history, and moving a portal to another design |
Building your first portal¶
The whole flow has three steps:
- Create a design. Pick a theme and build at least one layout: the navigation and the places where page content goes.
- Create a portal on that design. Add pages, each based on one of the design's layouts, and fill them with widgets.
- Preview, then publish the design and the portal. Viewers see the published version while you keep editing a draft.
Working on the canvas¶
Both editors draw the page or layout inside a device frame in the middle of the screen. The widget library is in the ribbon above, and the properties panel is on the right.
- Select a widget to show its toolbar: Select parent (useful when a widget fills its container), Expand, Revert to natural size, Duplicate and Delete.
- Resize by dragging a widget's handles. Dragging an expanded widget along its container's direction gives it the size you drag to. Dragging across keeps it expanded.
- Elements, in the left panel, lists the widget tree of what you are editing. Use it to select widgets the canvas hides.
- Undo and Redo in the Home ribbon tab step through your changes.
- Bind, in the design editor's Home tab, switches the canvas between showing bound values and the raw bindings.
Good to know¶
- Buttons don't run their actions on the canvas. Use Preview to click through windows and page links.
- The frame does not scroll. Content taller than the frame is cut off on the canvas, even though the published page scrolls. Judge scrolling in the preview.
- A widget that can't be drawn, for example because of a half-typed format such as
currency;U, shows could not be rendered with the error in the designer. It stays selectable so you can fix it, and redraws on your next change. In the published portal it shows nothing.