--- product: "AG Studio" title: "Static Content" description: "Add text and images to an AG Studio report with Static Content Widgets: alignment, text scaling, padding, image sizing and position." framework: react version: "3.1.0" related: - title: "Using the Catalogue" url: "https://www.ag-grid.com/studio/analysts/widget-catalogue/" - title: "Table Widgets" url: "https://www.ag-grid.com/studio/analysts/table-widgets/" - title: "Value Widgets" url: "https://www.ag-grid.com/studio/analysts/value-widgets/" - title: "Filter Widgets" url: "https://www.ag-grid.com/studio/analysts/filter-widgets/" llms: "https://www.ag-grid.com/studio/llms.txt" --- # Static Content Static Content Widgets add narrative or supporting material to a report, and they don't need any data. ## Text **Text** displays rich text content for titles, descriptions, or annotations. Type the text yourself in the Setup tab, or map a field to Value to show that field's value instead. The example below shows a Text Widget with typed text beside one with a field in its Value slot. #### Text ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; import { getData } from "./data.ts"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "page1", widgets: { "text-typed": { type: "text", dataMapping: {}, format: { title: { enabled: true, text: "Text: Typed", }, subtitle: { enabled: true, text: "Text typed on the Setup tab", }, style: { text: "Sales across all stores for the current fiscal year, including online orders shipped from each store.", }, }, }, "text-field": { type: "text", dataMapping: { value: [{ id: "notices.message", aggregation: "first" }], }, format: { title: { enabled: true, text: "Text: Field Value", }, subtitle: { enabled: true, text: "Value: Message", }, }, }, }, widgetLayout: { "text-typed": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 12 }, "text-field": { xTrack: 12, yTrack: 0, xSpan: 12, ySpan: 12 }, }, }, ], selectedPageId: "page1", panels: { filters: { collapsed: true, }, data: { collapsed: true, }, edit: { collapsed: true, }, }, }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, data: getData(), }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); ``` [Live example: Text](https://www.ag-grid.com/studio/examples/static-content-widgets/text-value/typescript/) ## Image **Image** displays an image from a static URL, for logos, backgrounds or other visual context. To take the URL from your data instead, map a field to Value in its Setup tab. Each viewer's browser loads the image when they view the dashboard, and your developer can restrict which sites images may come from. The example below shows the same logo twice: on the left from a URL entered in the Setup tab, and on the right from a field in the Value slot. #### Image ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; import { getData } from "./data.ts"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "page1", widgets: { "image-static": { type: "image", dataMapping: {}, format: { title: { enabled: true, text: "Image: Static URL", }, subtitle: { enabled: true, text: "URL entered on the Setup tab", }, style: { src: "https://www.ag-grid.com/studio/images/ag-studio-logo.svg", }, }, }, "image-field": { type: "image", dataMapping: { value: [{ id: "branding.logo", aggregation: "first" }], }, format: { title: { enabled: true, text: "Image: Field Value", }, subtitle: { enabled: true, text: "Value: Logo", }, }, }, }, widgetLayout: { "image-static": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 16 }, "image-field": { xTrack: 12, yTrack: 0, xSpan: 12, ySpan: 16 }, }, }, ], selectedPageId: "page1", panels: { filters: { collapsed: true, }, data: { collapsed: true, }, edit: { collapsed: true, }, }, }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, data: getData(), }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); ``` [Live example: Image](https://www.ag-grid.com/studio/examples/static-content-widgets/image-value/typescript/) ## Setup | Widget | Slot | Required | Accepts | What it does | | --- | --- | --- | --- | --- | | Text | Value | No | One field | Shows the field's value in place of the typed text. | | Image | Value | No | One field | Uses the field's value as the image URL in place of the static URL. | A field mapped to a Text Widget or an Image Widget shows its value for the filters currently applied, and replaces the typed text or static URL rather than appearing alongside it. You can map a field holding text, numbers or dates to a Text Widget. An Image Widget expects a field whose value is a URL, and shows a single image for the filters currently applied, not one per row. To show typed text and a field value together, create one field that joins them with [Calculations](https://www.ag-grid.com/studio/analysts/calculations/) and map that field instead. ## Format Text and Image Widgets have these settings of their own on the Format tab, beside the title and appearance settings every Widget has. Your developer can change the defaults shown. | Setting | Where | Default | What it does | | --- | --- | --- | --- | | Font | Text section | From the theme | Sets the typeface, size, weight and style of the text. **Color** sets its colour. | | Alignment | Text section | Center | Aligns the text to the left, centre or right. | | Vertical | Text section | Center | Places the text at the top, centre or bottom of the Widget. | | Scale to Fit | Text section | Off | Grows or shrinks the text to fill the Widget. The text never shrinks below half its font size. | | Padding | Text section | Off | Leaves a space between the text and the edges of the Widget. | | Sizing | Image section | Scale Down to Fit | Sets how the image fits the Widget: Scale Down to Fit, Fit Inside, Cover, Stretch or Keep Original Size. | | Position | Image section | Center | Places the image within the Widget when it does not fill it. | | Alt Text | Image section | Empty | Describes the image for screen reader users. When empty, the Widget's title is used, or Image if it has no title. | The example below shows a selection of settings, each turned on in its own Widget. #### Format ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "page1", widgets: { "text-align": { type: "text", dataMapping: {}, format: { title: { enabled: true, text: "Alignment: Left", }, subtitle: { enabled: true, text: "Text > Alignment Left", }, style: { text: "Sales across all stores for the current fiscal year, including online orders shipped from each store.", textAlign: "left", }, }, }, "text-vertical": { type: "text", dataMapping: {}, format: { title: { enabled: true, text: "Vertical: Top", }, subtitle: { enabled: true, text: "Text > Vertical Top", }, style: { text: "Sales across all stores for the current fiscal year, including online orders shipped from each store.", verticalAlign: "top", }, }, }, "text-scaling": { type: "text", dataMapping: {}, format: { title: { enabled: true, text: "Scale to Fit", }, subtitle: { enabled: true, text: "Text > Scale to Fit on", }, style: { text: "Sales across all stores for the current fiscal year, including online orders shipped from each store.", textScaling: { enabled: true, }, }, }, }, "text-padding": { type: "text", dataMapping: {}, format: { title: { enabled: true, text: "Padding", }, subtitle: { enabled: true, text: "Text > Padding on, Alignment Left", }, style: { text: "Sales across all stores for the current fiscal year, including online orders shipped from each store.", textAlign: "left", padding: true, }, }, }, "image-sizing": { type: "image", dataMapping: {}, format: { title: { enabled: true, text: "Sizing: Cover", }, subtitle: { enabled: true, text: "Image > Sizing Cover", }, style: { src: "https://www.ag-grid.com/studio/images/ag-studio-logo.svg", objectFit: "cover", }, }, }, "image-position": { type: "image", dataMapping: {}, format: { title: { enabled: true, text: "Position: Left", }, subtitle: { enabled: true, text: "Image > Position Left", }, style: { src: "https://www.ag-grid.com/studio/images/ag-studio-logo.svg", objectPosition: "left", }, }, }, }, widgetLayout: { "text-align": { xTrack: 0, yTrack: 0, xSpan: 12, ySpan: 14 }, "text-vertical": { xTrack: 12, yTrack: 0, xSpan: 12, ySpan: 14 }, "text-scaling": { xTrack: 0, yTrack: 14, xSpan: 12, ySpan: 14 }, "text-padding": { xTrack: 12, yTrack: 14, xSpan: 12, ySpan: 14 }, "image-sizing": { xTrack: 0, yTrack: 28, xSpan: 12, ySpan: 14 }, "image-position": { xTrack: 12, yTrack: 28, xSpan: 12, ySpan: 14 }, }, }, ], selectedPageId: "page1", panels: { filters: { collapsed: true, }, data: { collapsed: true, }, edit: { collapsed: true, }, }, }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, data: { sources: [ { id: "branding", data: [ { logo: "https://www.ag-grid.com/studio/images/ag-studio-logo.svg" }, ], }, ], }, }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); ``` [Live example: Format](https://www.ag-grid.com/studio/examples/static-content-widgets/static-content-format/typescript/)