Dropdown sample request

[yazjimanar]

Hi there, I have this column is SP list formatted using JSON each icon have an action, As you can see I have many icons and it get crowded!, so could you please help me convert these icons to dropdown using JSON.

[tecchan1107]

Sorry for the delay in commenting😢

Unfortunately, I think it is difficult to implement a drop-down at this time. How about displaying the actions on a custom card as shown in the following image?

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "div", "style": { "padding": "5px", "border-radius": "50%", "cursor": "pointer" }, "attributes": { "iconName": "DeveloperTools", "class": "ms-fontSize-xl ms-bgColor-themeLight--hover" }, "customCardProps": { "openOnEvent": "click", "directionalHint": "rightCenter", "isBeakVisible": true, "formatter": { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "width": "200px" }, "children": [ { "elmType": "div", "style": { "padding": "5px 10px", "display": "flex", "flex-direction": "row", "align-items": "center", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-themeLighter--hover ms-fontSize-l" }, "children": [ { "elmType": "span", "style": { "width": "30px" }, "attributes": { "iconName": "Cat" } }, { "elmType": "span", "txtContent": "Action A" } ] }, { "elmType": "div", "style": { "padding": "5px 10px", "display": "flex", "flex-direction": "row", "align-items": "center", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-themeLighter--hover ms-fontSize-l" }, "children": [ { "elmType": "span", "style": { "width": "30px" }, "attributes": { "iconName": "FangBody" } }, { "elmType": "span", "txtContent": "Action B" } ] }, { "elmType": "div", "style": { "padding": "5px 10px", "display": "flex", "flex-direction": "row", "align-items": "center", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-themeLighter--hover ms-fontSize-l" }, "children": [ { "elmType": "span", "style": { "width": "30px" }, "attributes": { "iconName": "Savings" } }, { "elmType": "span", "txtContent": "Action C" } ] } ] } ] } } } ] } ```

[tecchan1107]

I will close this issue once there is no reply. If you have any questions, I apologize, but please create a new issue again.