App Studio > Component > Selection List with Multiple Columns like BAQ Studio > Field Picker

  1. Kinetic 2024.1.10, Application Studio > Components > Selection List
    This will only provide one field/column to choose from available(left) and selected(right), review image below for more details.
    https://erphelp113100.zendesk.com/hc/en-us/articles/24036899014541-Component-Reference-and-Examples#Selectio

  2. I would like to request currently available component- which was already used in BAQ Studio > Query Designer as Field Picker. Which has multiple columns to select from left to right and all standard buttons.

This will enable end users to make selections with more granularity.

  1. I think this is also possible to create in Application Studio, with current tools available, but it will take a lot of time, efforts and testing to implement. We can feed data from BAQ. The only problem is sharing. If we wish to use this component on new applications, then start from scratch. It’s looks impossible without SDK.
  2. Therefore, I am requesting the component already implemented by Epicor Team in BAQ Studio, just make them generally available as standard components in Application Studio.
  3. I am very much sure; this will be great addon for many of the Epicor users and developers working with Classic/Kinetic Customizations.

If you like this enhancement idea, we can get this existing component in next release for all from Epicor as standard component in App Studio. Please support my idea and vote at: Std Component: Selection List with multiple columns-like BAQ Studio >Field Selection control

Please vote my idea, If you will have similar use cases. It’s better to use Epicor designed & ready Component, it just need released from Epicor for General use. Thanks

Good idea. Sounds like a good candidate to test the status of AppStudio user defined components.

selectionGrids

selectionGrids.json
{
    "request": {
        "id": "selectionGrids",
        "viewType": "COMPONENT",
        "layout": {
            "name": "Component",
            "guid": "2dcd1674-5e34-4d98-b493-c75747027376",
            "caption": "Component",
            "viewType": "COMPONENT",
            "pageType": "Responsive",
            "width": 600,
            "components": [
                {
                    "id": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                    "sourceTypeId": "metafx-div",
                    "model": {
                        "guid": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                        "id": "div-row-a5da4"
                    },
                    "components": [
                        {
                            "id": "eb37271f-3668-4006-9fb6-82fe00b985e9",
                            "sourceTypeId": "metafx-col",
                            "model": {
                                "guid": "eb37271f-3668-4006-9fb6-82fe00b985e9",
                                "flexBasis": "45%",
                                "id": "div-col-eb372"
                            },
                            "parentId": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                            "components": [
                                {
                                    "id": "feef3111-cf54-4bf1-aa5a-4545f5fc6775",
                                    "sourceTypeId": "metafx-panel-card-grid",
                                    "model": {
                                        "guid": "feef3111-cf54-4bf1-aa5a-4545f5fc6775",
                                        "title": "gridSource",
                                        "id": "gridSource",
                                        "disablePanelCardStyle": false,
                                        "expanded": true,
                                        "gridModel": {
                                            "preloadOptions": {
                                                "noOfRecordsTobePreloaded": 500
                                            },
                                            "selectionOptions": {
                                                "showCheckBox": true,
                                                "showSelectAll": true
                                            },
                                            "height": 600,
                                            "columns": [
                                                {},
                                                {},
                                                {}
                                            ]
                                        },
                                        "fullScreenButtonVisible": false
                                    },
                                    "parentId": "eb37271f-3668-4006-9fb6-82fe00b985e9"
                                }
                            ]
                        },
                        {
                            "id": "c71783a0-36d2-400d-99e2-ed0050844a1c",
                            "sourceTypeId": "metafx-col",
                            "model": {
                                "guid": "c71783a0-36d2-400d-99e2-ed0050844a1c",
                                "flexBasis": "10%",
                                "id": "div-col-c7178"
                            },
                            "parentId": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                            "components": [
                                {
                                    "id": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb",
                                    "sourceTypeId": "metafx-flex-box",
                                    "model": {
                                        "guid": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb",
                                        "id": "metafx-flex-box-2ee45"
                                    },
                                    "parentId": "c71783a0-36d2-400d-99e2-ed0050844a1c",
                                    "components": [
                                        {
                                            "id": "0c34cde5-d13b-4606-86eb-ec91afbc18b1",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "0c34cde5-d13b-4606-86eb-ec91afbc18b1",
                                                "id": "btnMoveTop",
                                                "epBinding": "sysGlobalVariable.sg_btnMoveTop",
                                                "icon": "mdi mdi-chevron-double-up",
                                                "iconAlignRight": false,
                                                "fixedWidth": true,
                                                "width": 50,
                                                "alignment": "Center"
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "ce581bb2-175a-44ce-96e0-a29139701101",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "ce581bb2-175a-44ce-96e0-a29139701101",
                                                "id": "btnMoveUp",
                                                "epBinding": "sysGlobalVariable.sg_btnMoveUp",
                                                "width": 50,
                                                "icon": "mdi mdi-chevron-up",
                                                "fixedWidth": true,
                                                "alignment": "Center"
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "37904765-0e5e-45c2-8a4e-5a6a94637bc6",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "37904765-0e5e-45c2-8a4e-5a6a94637bc6",
                                                "id": "btnAdd",
                                                "epBinding": "sysGlobalVariable.sg_btnAdd",
                                                "alignment": "Center",
                                                "icon": "mdi mdi-chevron-right",
                                                "fixedWidth": true,
                                                "width": 50
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "7e980526-14d9-4ff9-a949-ec2143e169df",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "7e980526-14d9-4ff9-a949-ec2143e169df",
                                                "id": "btnRemove",
                                                "epBinding": "sysGlobalVariable.sg_btnRemove",
                                                "alignment": "Center",
                                                "width": 50,
                                                "icon": "mdi mdi-chevron-left",
                                                "fixedWidth": true
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "5782e8aa-da5f-4a0a-ad83-4717cba8bccd",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "5782e8aa-da5f-4a0a-ad83-4717cba8bccd",
                                                "id": "btnMovedown",
                                                "epBinding": "sysGlobalVariable.sg_btnMovedown",
                                                "alignment": "Center",
                                                "width": 50,
                                                "icon": "mdi mdi-chevron-down",
                                                "fixedWidth": true
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "ef056f5b-3fd6-446b-8fd0-ee1c1ecfec2a",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "ef056f5b-3fd6-446b-8fd0-ee1c1ecfec2a",
                                                "id": "btnMoveBottom",
                                                "epBinding": "sysGlobalVariable.sg_btnMoveBottom",
                                                "icon": "mdi mdi-chevron-double-down",
                                                "alignment": "Center",
                                                "width": 50,
                                                "fixedWidth": true
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "div-col-998b1",
                            "sourceTypeId": "metafx-col",
                            "model": {
                                "id": "div-col-998b1",
                                "guid": "998b1eb1-ade5-480d-a5f3-5df46202bda2",
                                "flexBasis": "45%"
                            },
                            "parentId": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                            "components": [
                                {
                                    "id": "e552d159-fad1-41e1-8027-e90700cb77d8",
                                    "sourceTypeId": "metafx-panel-card-grid",
                                    "model": {
                                        "guid": "e552d159-fad1-41e1-8027-e90700cb77d8",
                                        "title": "gridTarget",
                                        "id": "gridTarget",
                                        "disablePanelCardStyle": false,
                                        "expanded": true,
                                        "gridModel": {
                                            "selectionOptions": {
                                                "showCheckBox": true,
                                                "showSelectAll": true
                                            },
                                            "columns": [
                                                {},
                                                {},
                                                {}
                                            ]
                                        },
                                        "fullScreenButtonVisible": false
                                    },
                                    "parentId": "div-col-998b1"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        "properties": [],
        "pages": [],
        "orphans": null,
        "tools": [],
        "commentText": "",
        "deviceType": "Desktop",
        "events": [],
        "serializedEvents": null,
        "applicationType": "component",
        "subApplicationType": "component",
        "uxAppVersion": 0
    }
}

I take a look, try to simulate base RvLock, the format looks different. How to use and add custom component. Do we need SDK for App Studio?. We are onPrem. Please send me more details to use this, if possible. Thanks

I really don’t know to be honest. It’s not documented as far as I know. If you don’t see the Add button on Components list in AppStudio, then it’s possible that became available in 2025.1 or .2.

You could try using REST:

POST /Ice.Lib.MetaFXSvc/GetNewApplication
BODY

{"request":{"Id":"selectionGrids","Type":"component","SubType":"Component"}}

then
POST /Ice.Lib.MetaFXSvc/SaveApp
BODY

{
    "request": {
        "id": "selectionGrids",
        "viewType": "COMPONENT",
        "layout": {
            "name": "Component",
            "guid": "2dcd1674-5e34-4d98-b493-c75747027376",
            "caption": "Component",
            "viewType": "COMPONENT",
            "pageType": "Responsive",
            "width": 600,
            "components": [
                {
                    "id": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                    "sourceTypeId": "metafx-div",
                    "model": {
                        "guid": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                        "id": "div-row-a5da4"
                    },
                    "components": [
                        {
                            "id": "eb37271f-3668-4006-9fb6-82fe00b985e9",
                            "sourceTypeId": "metafx-col",
                            "model": {
                                "guid": "eb37271f-3668-4006-9fb6-82fe00b985e9",
                                "flexBasis": "45%",
                                "id": "div-col-eb372"
                            },
                            "parentId": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                            "components": [
                                {
                                    "id": "feef3111-cf54-4bf1-aa5a-4545f5fc6775",
                                    "sourceTypeId": "metafx-panel-card-grid",
                                    "model": {
                                        "guid": "feef3111-cf54-4bf1-aa5a-4545f5fc6775",
                                        "title": "gridSource",
                                        "id": "gridSource",
                                        "disablePanelCardStyle": false,
                                        "expanded": true,
                                        "gridModel": {
                                            "preloadOptions": {
                                                "noOfRecordsTobePreloaded": 500
                                            },
                                            "selectionOptions": {
                                                "showCheckBox": true,
                                                "showSelectAll": true
                                            },
                                            "height": 600,
                                            "columns": [
                                                {},
                                                {},
                                                {}
                                            ]
                                        },
                                        "fullScreenButtonVisible": false
                                    },
                                    "parentId": "eb37271f-3668-4006-9fb6-82fe00b985e9"
                                }
                            ]
                        },
                        {
                            "id": "c71783a0-36d2-400d-99e2-ed0050844a1c",
                            "sourceTypeId": "metafx-col",
                            "model": {
                                "guid": "c71783a0-36d2-400d-99e2-ed0050844a1c",
                                "flexBasis": "10%",
                                "id": "div-col-c7178"
                            },
                            "parentId": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                            "components": [
                                {
                                    "id": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb",
                                    "sourceTypeId": "metafx-flex-box",
                                    "model": {
                                        "guid": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb",
                                        "id": "metafx-flex-box-2ee45"
                                    },
                                    "parentId": "c71783a0-36d2-400d-99e2-ed0050844a1c",
                                    "components": [
                                        {
                                            "id": "0c34cde5-d13b-4606-86eb-ec91afbc18b1",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "0c34cde5-d13b-4606-86eb-ec91afbc18b1",
                                                "id": "btnMoveTop",
                                                "epBinding": "sysGlobalVariable.sg_btnMoveTop",
                                                "icon": "mdi mdi-chevron-double-up",
                                                "iconAlignRight": false,
                                                "fixedWidth": true,
                                                "width": 50,
                                                "alignment": "Center"
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "ce581bb2-175a-44ce-96e0-a29139701101",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "ce581bb2-175a-44ce-96e0-a29139701101",
                                                "id": "btnMoveUp",
                                                "epBinding": "sysGlobalVariable.sg_btnMoveUp",
                                                "width": 50,
                                                "icon": "mdi mdi-chevron-up",
                                                "fixedWidth": true,
                                                "alignment": "Center"
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "37904765-0e5e-45c2-8a4e-5a6a94637bc6",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "37904765-0e5e-45c2-8a4e-5a6a94637bc6",
                                                "id": "btnAdd",
                                                "epBinding": "sysGlobalVariable.sg_btnAdd",
                                                "alignment": "Center",
                                                "icon": "mdi mdi-chevron-right",
                                                "fixedWidth": true,
                                                "width": 50
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "7e980526-14d9-4ff9-a949-ec2143e169df",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "7e980526-14d9-4ff9-a949-ec2143e169df",
                                                "id": "btnRemove",
                                                "epBinding": "sysGlobalVariable.sg_btnRemove",
                                                "alignment": "Center",
                                                "width": 50,
                                                "icon": "mdi mdi-chevron-left",
                                                "fixedWidth": true
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "5782e8aa-da5f-4a0a-ad83-4717cba8bccd",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "5782e8aa-da5f-4a0a-ad83-4717cba8bccd",
                                                "id": "btnMovedown",
                                                "epBinding": "sysGlobalVariable.sg_btnMovedown",
                                                "alignment": "Center",
                                                "width": 50,
                                                "icon": "mdi mdi-chevron-down",
                                                "fixedWidth": true
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        },
                                        {
                                            "id": "ef056f5b-3fd6-446b-8fd0-ee1c1ecfec2a",
                                            "sourceTypeId": "erp-button",
                                            "model": {
                                                "guid": "ef056f5b-3fd6-446b-8fd0-ee1c1ecfec2a",
                                                "id": "btnMoveBottom",
                                                "epBinding": "sysGlobalVariable.sg_btnMoveBottom",
                                                "icon": "mdi mdi-chevron-double-down",
                                                "alignment": "Center",
                                                "width": 50,
                                                "fixedWidth": true
                                            },
                                            "parentId": "2ee45ce1-5ebd-45ad-b284-8a7f5fb14bbb"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "id": "div-col-998b1",
                            "sourceTypeId": "metafx-col",
                            "model": {
                                "id": "div-col-998b1",
                                "guid": "998b1eb1-ade5-480d-a5f3-5df46202bda2",
                                "flexBasis": "45%"
                            },
                            "parentId": "a5da43ae-c1ca-47c8-89e8-25b42e507df5",
                            "components": [
                                {
                                    "id": "e552d159-fad1-41e1-8027-e90700cb77d8",
                                    "sourceTypeId": "metafx-panel-card-grid",
                                    "model": {
                                        "guid": "e552d159-fad1-41e1-8027-e90700cb77d8",
                                        "title": "gridTarget",
                                        "id": "gridTarget",
                                        "disablePanelCardStyle": false,
                                        "expanded": true,
                                        "gridModel": {
                                            "selectionOptions": {
                                                "showCheckBox": true,
                                                "showSelectAll": true
                                            },
                                            "columns": [
                                                {},
                                                {},
                                                {}
                                            ]
                                        },
                                        "fullScreenButtonVisible": false
                                    },
                                    "parentId": "div-col-998b1"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        "properties": [],
        "pages": [],
        "orphans": null,
        "tools": [],
        "commentText": "",
        "deviceType": "Desktop",
        "events": [],
        "serializedEvents": null,
        "applicationType": "component",
        "subApplicationType": "component",
        "uxAppVersion": 0
    }
}

Alternatively, since you’re on prem, you could probably place jsonc in \MetaUI\Shared\components and then run conversion 191 (!? I think it is !?) to load MetaUI into the database. I’ve only read about it and never done this so do your research first.

FYI - this json is only the ui elements. No events or rules or grid settings are done in the component definition. So as-is, it’s useful to drag onto a page as a single component-of-components. Then you can setup all the events on that parent page.

Doing this a few times to find the best pattern to setup grid BAQs, dataview(s) and button events would be the next step. Then some or all of that setup could be moved to the component def for future reuse.

Great. You provided the new perspective. I tried it in 2024.2.27, it’s working for quick testing. After publish, I can see my custom Component. Not tried button, will plan. Exactly this will help us a lt. We can convert complex setup as custom components and reuse when needed. I agree, can’t find any documentation for this. Need to understand the public property-How to use them.


Button are also available.

Thanks for pointing out.
Epicor does have same premade for BAQ studio. My ask was to reuse, if they make GA release for us.It saves a time for development and testing. Thanks.

Looks like its working for you about as well as it is for me.

Just know, this seems slightly half-baked and may indeed be intended for Cloud-SDK-only. I have no idea.

I’d consider UDComponents experimental at this time.