> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# IFluidLayoutCustomizer

- Package: [@gooddata/sdk-ui-dashboard](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/index.md)
- Kind: interface
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-dashboard/src/plugins/customizer.ts

Set of functions you can use to customize the fluid layout of the dashboard rendered.

**Signature:**

```typescript
export interface IFluidLayoutCustomizer 
```

## Methods

| Method | Description |
| --- | --- |
| [addItem(sectionIdx, itemIdx, item)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md#ifluidlayoutcustomizeradditem) | Adds a new item containing a custom widget onto the dashboard. |
| [addItemToPath(itemPath, item)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md#ifluidlayoutcustomizeradditemtopath) | Adds a new item containing a custom widget onto the dashboard. |
| [addSection(sectionIdx, section)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md#ifluidlayoutcustomizeraddsection) | Adds a new section with one or more custom widgets onto the fluid layout. |
| [addSectionToPath(sectionPath, section)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md#ifluidlayoutcustomizeraddsectiontopath) | Adds a new section with one or more custom widgets onto the layout even to the nested layout. |

## Method details

### IFluidLayoutCustomizer.addItem()

> Warning: This API is now obsolete.
> 
> Use [IFluidLayoutCustomizer.addItemToPath()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md#ifluidlayoutcustomizeradditemtopath) with itemPath param instead.
> 

Adds a new item containing a custom widget onto the dashboard.

**Signature:**

```typescript
addItem(sectionIdx: number, itemIdx: number, item: IDashboardLayoutItem<ICustomWidget>): IFluidLayoutCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| sectionIdx | number | index of section where to add the new item |
| itemIdx | number | index within the section where to add new item; you may specify -1 to add the item at the end of the section |
| item | [IDashboardLayoutItem](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboardlayoutitem/index.md)&lt;[ICustomWidget](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.icustomwidget/index.md)&gt; | item containing custom widget; note: customizer will make a deep copy of the item before adding it onto a dashboard. At this moment, the newly added items are read-only. |

**Returns:**

[IFluidLayoutCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md)

#### Remarks

New item will be added to an existing section at index `sectionIdx` and within that section will be placed at `itemIdx`. The item to add must contain a custom widget data. Attempts to add item that does not contain any widget data will be ignored and warnings will be reported. Keep in mind that this can lead to further errors or problems down the line if you are adding more items at specific indexes into the same section.

Note: new items will be added into existing sections before new sections will be added using the [IFluidLayoutCustomizer.addSectionToPath()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md#ifluidlayoutcustomizeraddsectiontopath) method. Therefore,

### IFluidLayoutCustomizer.addItemToPath()

Adds a new item containing a custom widget onto the dashboard.

**Signature:**

```typescript
addItemToPath(itemPath: ILayoutItemPath, item: IDashboardLayoutItem<ICustomWidget>): IFluidLayoutCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| itemPath | [ILayoutItemPath](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ilayoutitempath/index.md) | layout path where to add new item |
| item | [IDashboardLayoutItem](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboardlayoutitem/index.md)&lt;[ICustomWidget](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.icustomwidget/index.md)&gt; | item containing custom widget; note: customizer will make a deep copy of the item before adding it onto a dashboard. At this moment, the newly added items are read-only. |

**Returns:**

[IFluidLayoutCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md)

#### Remarks

New item will be added to position defined by provided path allowing target also nested layouts/sections. All sections in path already need to exist. The item to add must contain a custom widget data. Attempts to add item that does not contain any widget data will be ignored and warnings will be reported. Keep in mind that this can lead to further errors or problems down the line if you are adding more items at specific indexes into the same section.

Note: new items will be added into existing sections before new sections will be added using the IFluidLayoutCustomizer.addSection method. Therefore,

### IFluidLayoutCustomizer.addSection()

> Warning: This API is now obsolete.
> 
> Use [IFluidLayoutCustomizer.addSectionToPath()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md#ifluidlayoutcustomizeraddsectiontopath) with sectionPath param instead.
> 

Adds a new section with one or more custom widgets onto the fluid layout.

**Signature:**

```typescript
addSection(sectionIdx: number, section: IDashboardLayoutSection<ICustomWidget>): IFluidLayoutCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| sectionIdx | number | index to add the new section at |
| section | [IDashboardLayoutSection](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboardlayoutsection/index.md)&lt;[ICustomWidget](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.icustomwidget/index.md)&gt; | section to add; note: customizer will make a deep copy of the item before adding it onto a dashboard. At this moment, the newly added items are read-only. |

**Returns:**

[IFluidLayoutCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md)

#### Remarks

The section to add must not be empty - it must contain at least one item. Attempts to add empty sections will be ignored and warnings will be reported.

### IFluidLayoutCustomizer.addSectionToPath()

Adds a new section with one or more custom widgets onto the layout even to the nested layout.

**Signature:**

```typescript
addSectionToPath(sectionPath: ILayoutSectionPath, section: IDashboardLayoutSection<ICustomWidget>): IFluidLayoutCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| sectionPath | [ILayoutSectionPath](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ilayoutsectionpath/index.md) | path in layout to add the new section at |
| section | [IDashboardLayoutSection](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.idashboardlayoutsection/index.md)&lt;[ICustomWidget](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.icustomwidget/index.md)&gt; | section to add; note: customizer will make a deep copy of the item before adding it onto a dashboard. At this moment, the newly added items are read-only. |

**Returns:**

[IFluidLayoutCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ifluidlayoutcustomizer/index.md)

#### Remarks

The section to add must not be empty - it must contain at least one item. Attempts to add empty sections will be ignored and warnings will be reported.