GitHub user dosubot[bot] added a comment to the discussion: Embedding Dashboard
<!-- Answer --> Since embedded dashboards are read-only by design, here are your main alternatives for providing layout control without redirecting to Superset: **1. Build a Custom Layout Editor + REST API** This is the most viable approach. Superset's [PUT /api/v1/dashboard/<pk> endpoint](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/dashboards/api.py#L598-L683) accepts a `position_json` field for programmatic layout updates. The workflow: 1. Build your own drag-and-drop layout editor in your React app 2. Generate the `position_json` matching [Superset's v2 hierarchical structure](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/commands/dashboard/export.py#L59-L70) 3. Call the API to save the layout 4. Embed the updated dashboard **Example position_json structure:** ```json { "DASHBOARD_VERSION_KEY": "v2", "ROOT_ID": { "children": ["GRID_ID"], "id": "ROOT_ID", "type": "ROOT" }, "GRID_ID": { "children": ["ROW-ABC123"], "id": "GRID_ID", "type": "GRID" }, "ROW-ABC123": { "type": "ROW", "id": "ROW-ABC123", "children": ["CHART-DEF456"], "meta": { "background": "BACKGROUND_TRANSPARENT" } }, "CHART-DEF456": { "type": "CHART", "id": "CHART-DEF456", "meta": { "chartId": 42, "height": 50, "width": 6 } } } ``` **2. Use SDK for Chart Metadata** The [getChartDataPayloads() method](https://github.com/apache/superset/pull/36237) lets you fetch chart data from embedded dashboards, which can help populate your custom layout editor with available charts. **Important considerations:** - API calls require authenticated access (not guest tokens) - [Component IDs must follow the pattern `{TYPE}-{uniqueId}`](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/util/newComponentFactory.js#L68) - Parent-child relationships must be valid This approach separates layout editing (your app) from visualization (embedded Superset), giving you full control while keeping the powerful chart rendering. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/ada1e758-b787-4086-9df5-a7a93d071c99?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/ada1e758-b787-4086-9df5-a7a93d071c99?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/ada1e758-b787-4086-9df5-a7a93d071c99?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/ada1e758-b787-4086-9df5-a7a93d071c99?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/ada1e758-b787-4086-9df5-a7a93d071c99?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/ada1e758-b787-4086-9df5-a7a93d071c99?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/ada1e758-b787-4086-9df5-a7a93d071c99?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Since%20embedded%20dashboards%20are%20read-only%20by%20design%2C%20here%20are%20your%20main%20alternatives%20for%20providing%20layout%20control%20without%20redirecting%20to%20Superset%3A%0A%0A%2A%2A1.%20Build%20a%20Custom%20Layout%20Editor%20%2B%20REST%20API%2A%2A%0A%0AThis%20is%20the%20most%20viable%20approach.%20Superset%27s%20%5BPUT%20/api/v1/dashboard/%3Cpk%3E%20endpoint%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/dashboards/api.py%23L598-L683%29%20accepts%20a%20%60position_json%60%20field%20for%20programmatic%20layout%20updates.%0A%0AThe%20workflow%3A%0A1.%20Build%20your%20own%20drag-and-drop%20layout%20editor%20in%20your%20React%20app%0A2.%20Generate%20the%20%60position_json%60%20matching%20%5 BSuperset%27s%20v2%20hierarchical%20structure%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/commands/dashboard/export.py%23L59-L70%29%0A3.%20Call%20the%20API%20to%20save%20the%20layout%0A4.%20Embed%20the%20updated%20dashboard%0A%0A%2A%2AExample%20position_json%20structure%3A%2A%2A%0A%60%60%60json%0A%7B%0A%20%20%22DASHBOARD_VERSION_KEY%22%3A%20%22v2%22%2C%0A%20%20%22ROOT_ID%22%3A%20%7B%20%22children%22%3A%20%5B%22GRID_ID%22%5D%2C%20%22id%22%3A%20%22ROOT_ID%22%2C%20%22type%22%3A%20%22ROOT%22%20%7D%2C%0A%20%20%22GRID_ID%22%3A%20%7B%20%22children%22%3A%20%5B%22ROW-ABC123%22%5D%2C%20%22id%22%3A%20%22GRID_ID%22%2C%20%22type%22%3A%20%22GRID%22%20%7D%2C%0A%20%20%22ROW-ABC123%22%3A%20%7B%0A%20%20%20%20%22type%22%3A%20%22ROW%22%2C%0A%20%20%20%20%22id%22%3A%20%22ROW-ABC123%22%2C%0A%20%20%20%20%22children%22%3A%20%5B%22CHART-DEF456%22%5D%2C%0A%20%20%20%20%22meta%22%3A%20%7B%20%22background%22%3A%20%22BACKGROUND_TRANSPARENT%22%20%7D%0A%20%20%7D% 2C%0A%20%20%22CHART-DEF456%22%3A%20%7B%0A%20%20%20%20%22type%22%3A%20%22CHART%22%2C%0A%20%20%20%20%22id%22%3A%20%22CHART-DEF456%22%2C%0A%20%20%20%20%22meta%22%3A%20%7B%20%22chartId%22%3A%2042%2C%20%22height%22%3A%2050%2C%20%22width%22%3A%206%20%7D%0A%20%20%7D%0A%7D%0A%60%60%60%0A%0A%2A%2A2.%20Use%20SDK%20for%20Chart%20Metadata%2A%2A%0A%0AThe%20%5BgetChartDataPayloads%28%29%20method%5D%28https%3A//github.com/apache/superset/pull/36237%29%20lets%20you%20fetch%20chart%20data%20from%20embedded%20dashboards%2C%20which%20can%20help%20populate%20your%20custom%20layout%20editor%20with%20available%20charts.%0A%0A%2A%2AImportant%20considerations%3A%2A%2A%0A-%20API%20calls%20require%20authenticated%20access%20%28not%20guest%20tokens%29%0A-%20%5BComponent%20IDs%20must%20follow%20the%20pattern%20%60%7BTYPE%7D-%7BuniqueId%7D%60%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dashboard/util/newComponentFactory.js%23L68%29%0A-%20Parent-c hild%20relationships%20must%20be%20valid%0A%0AThis%20approach%20separates%20layout%20editing%20%28your%20app%29%20from%20visualization%20%28embedded%20Superset%29%2C%20giving%20you%20full%20control%20while%20keeping%20the%20powerful%20chart%20rendering.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/38166) GitHub link: https://github.com/apache/superset/discussions/38166#discussioncomment-15889804 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
