> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/package-reference/components-library/gm-flow-layout.md).

# GM - Flow Layout

(gmpkg:FlowLayoutComponent)

## **Documentation**

**GM - Flow Layout** component is used to edit a related object using a layout configuration within a flow. The related object could be at any level. You can configure this component to display sections and define also their visibilities. With this component, you can leverage your existing data model and reduce flow maintenance. The edited record is automatically saved after moving forward in the flow.

**Use case:** Edit the ultimate account details of a contact flow with different sections and of course more than 2 columns!

## **Specification**

<table data-full-width="true"><thead><tr><th>Property</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>recordId</td><td>String</td><td>recordId to use. Use it only for community.</td></tr><tr><td>SObject Name</td><td>String</td><td>Object name to load.</td></tr><tr><td>Target Object Name</td><td>String</td><td>Target object name to load.</td></tr><tr><td>Record Id Field</td><td>String</td><td>Record Id field to load.</td></tr><tr><td>Record Layout</td><td>String</td><td>JSON record layout. See <a href="/package-reference/components-library/gm-record-layout.md"><strong>GM - Record Layout</strong></a> for the layout schema.</td></tr></tbody></table>

{% hint style="info" %}
Unlike **GM - Record Layout**, **GM - Flow Layout** doesn't expose Record Actions, Show Actions as Buttons, Visible Actions, Show Border or Dynamic UI Refresh. The flow navigation buttons are rendered by the component.
{% endhint %}

## **API Reference**

{% tabs fullWidth="true" %}
{% tab title="FlowLayoutComponent.design" %}

```xml
<design:component label="GM - Flow Layout">    
    <design:attribute name="recordId" label="recordId" description="recordId to use. Use it only for community"/>        
    <design:attribute name="sObjectName" label="SObject Name" description="Object Name to load"/>    
    <design:attribute name="targetObjName" label="Target Object Name" description="Object Name to load"/>    
    <design:attribute name="recordIdField" label="Record Id Field" description="Record Id Field to load" />
    <design:attribute name="recordLayout" label="Record Layout" description="JSON Record Layout"/>    
</design:component>
```

{% endtab %}
{% endtabs %}