A standalone layout is a page layout for a page that holds exactly one widget. The widget fills the width and height of the page canvas, so it suits pages such as a full-page grid or a single detail chart.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
AgDataEngine,
AgDataSourcesDefinition,
AgReportHistory,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
AgStudioTheme,
enableStudioDevValidations,
studioTheme,
} from "ag-studio";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div style="display: flex; flex-direction: column; height: 100%">
<ag-studio
style="width: 100%; height: 100%;"
class="my-studio-container"
@api-ready="onApiReady"
:initialState="initialState"
:mode="mode"
:theme="theme"
:data="data"></ag-studio>
</div>
</div>
`,
components: {
"ag-studio": AgStudio,
},
setup(props) {
const studioApi = shallowRef<AgStudioApi | null>(null);
const initialState = ref<AgReportState | AgReportHistory>({
pages: [
{
id: "a",
layout: {
type: "standalone",
},
widgets: {
grid: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.country" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
{ id: "medals.total", aggregation: "sum" },
],
},
sort: [
{
field: { id: "medals.total", aggregation: "sum" },
direction: "desc",
},
],
},
},
},
],
selectedPageId: "a",
panels: {
filters: { collapsed: true },
edit: { collapsed: true },
data: { collapsed: true },
},
});
const mode = ref<AgStudioMode>("edit");
const theme = ref<AgStudioTheme>(
studioTheme.withParams({ studioMinWidth: 0, studioMinHeight: 0 }),
);
const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);
const onApiReady = (params: AgStudioApiReadyEvent) => {
studioApi.value = params.api;
const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });
fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((respData) => (data.value = toStudioData(respData)));
};
return {
studioApi,
initialState,
mode,
theme,
data,
onApiReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
Setting a Standalone Layout Copy Link
Set type to 'standalone' in the layout of a page in the report state:
<ag-studio
:initialState="initialState"
/* other studio properties ... */>
</ag-studio>
this.initialState = {
pages: [
{
id: 'medals',
layout: {
type: 'standalone',
},
widgets: {
grid: {
type: 'grid',
dataMapping: {
cols: [{ id: 'medals.country' }, { id: 'medals.gold', aggregation: 'sum' }],
},
},
},
},
],
selectedPageId: 'medals',
};To use a standalone layout for every page, set type in the Studio-wide layout property instead. A page's own layout takes precedence over the Studio-wide value. For a page that holds more than one widget, see More Than One Widget.
<ag-studio
:layout="layout"
/* other studio properties ... */>
</ag-studio>
this.layout = {
type: 'standalone',
};In a standalone layout:
- The widget cannot be moved or resized.
- The page's
widgetLayoutis not used, so it can be left out. - The
columnsandrowHeightproperties have no effect, because the widget is not placed on a grid.
Width and Height Copy Link
The outer Studio component has a default Min Width and Min Height of 600px. In a standalone layout, consider overriding the studioMinWidth and studioMinHeight theme parameters (for example, setting them to 0) to avoid double scrollbars when the widget fills the page.
Canvas Width Copy Link
A standalone layout takes its default canvas width from two theme parameters, in place of the Canvas Min Width and Canvas Max Width used by other pages:
- Canvas Standalone Min Width (
studioCanvasStandaloneMinWidth) defaults to0, so there is no minimum width. - Canvas Standalone Max Width (
studioCanvasStandaloneMaxWidth) defaults to the value ofstudioCanvasMaxWidth, which has no maximum unless set.
The minWidth and maxWidth layout properties override these theme parameters. A value set on the page is used first, then a value set in the Studio-wide layout property, then the theme parameter.
More Than One Widget Copy Link
A page with a standalone layout must hold exactly one widget. This applies whether the page sets the layout in its own layout or inherits it from the Studio-wide layout property.
When such a page holds more than one widget, Studio reports a state error and shows only the first widget. What happens to the other widgets in the report state depends on the mode:
- In edit mode, they are removed from the report state.
- In view mode, they are kept in the report state but are not shown, and the state error is fatal.
See Invalid State for how to handle state errors.