Noob question about displaying data that contains sub records using SmartClient_v120p_2019-04-13_Evaluation

[mkramer]

Hi,

I need to display/edit data that is organized as a record that contains sub records. The outer record is display only, the records contained in the sub array (metafields, see below) need to be editable.

Below is an example record for reference. From a usability perspective, it would be ideal if the editable records are in a ListGrid.
Is there a way to use grouping to display the outer record, with the metafield records in the grid?

I would greatly appreciate any guidance on the correct way to implement this.

Data Record:

    {
        id: 1757289480226,
        src: "https://cdn.shopify.com/s/files/1/0049/8358/6850/products/bpa-cereal-soup-bowl-light-blue.png?v=1552283008",
        title: "BPA Free Cereal / Soup Bowl - Lt. Blue",
        vid: 16207020490786,
        vTitle: "Default Title",
        sku: "HRBOWL_LTBLUE",
        metaFields: [
            {
                id: 4727600054306,
                namespace: "case_size_selector",
                key: "Super-Wholesale",
                value: 1,
                value_type: "integer",
                description: null,
                owner_id: 4983586850,
                created_at: "2019-04-12T17:12:09-04:00",
                updated_at: "2019-04-12T17:12:09-04:00",
                owner_resource: "shop",
                admin_graphql_api_id: "gid://shopify/Metafield/4727600054306"
            },
            {
                id: 4727580753954,
                namespace: "case_size_selector",
                key: "VIP",
                value: 1,
                value_type: "integer",
                description: null,
                owner_id: 4983586850,
                created_at: "2019-04-12T17:09:44-04:00",
                updated_at: "2019-04-12T17:09:44-04:00",
                owner_resource: "shop",
                admin_graphql_api_id: "gid://shopify/Metafield/4727580753954"
            },
            {
                id: 4722759073826,
                namespace: "case_size_selector",
                key: "Wholesale",
                value: 1,
                value_type: "integer",
                description: null,
                owner_id: 4983586850,
                created_at: "2019-04-12T02:17:29-04:00",
                updated_at: "2019-04-12T02:17:29-04:00",
                owner_resource: "shop",
                admin_graphql_api_id: "gid://shopify/Metafield/4722759073826"
            }
        ]
    },

[Isomorphic]

You didn't mention what sort of DataSource setup you're using, but for server-based SQL or Hibernate DataSource, both includeFrom and the Server Summaries feature would be ways to possibly implement this. For client-based DataSources, consider dataSourceField.valueXPath, or simply transforming the data in JavaScript in DataSource.transformResponse(), with a possibly corresponding transformRequest() implementation if you need to break out the records into the original format before sending to the server to save.

[mkramer]

Thanks for the above input!

I am using isc.RestDataSource. I decided to break the results into two queries to create a master/detail metaphor. I am able to load the respective data into a master grid, and detail grid. I have not been able to figure out how to cause the detail grid to respond to selections on the master grid. There is a one to many relationship on the owner_id field between the master and detail records.

I have tried attaching the click event of the master grid to the "fetchRelated" and "filterData" of the detail grid, but does nothing.

These are my DataSource definitions. (not using RestDataSource for prototyping, using local data in.json files).

[B]Master[/B]
<DataSource ID="masterDetail_Product" dataFormat="json" dataURL="[ISOMORPHIC]/testData/variantProductData.json">
    <fields>
        <field name="id" required="false" title="Id" hidden="true" primaryKey="false"/>
        <field name="src" type="image" length="" title="Image"/>
        <field name="title" title="Title"/>
        <field name="[B]owner_id[/B]" title="owner_id" hidden="true" primaryKey="true" foreignKey="masterDetail_ProductItem.owner_id"/>
        <field name="vTitle" title="Variant"/>
        <field name="sku" title="SKU"/>
    </fields>
</DataSource>

[B]Detail[/B]
<DataSource ID="masterDetail_ProductItem" dataFormat="json" dataURL="[ISOMORPHIC]/testData/variantProductMetadata.json">
    <fields>
        <field name="id" required="true" title="Id" hidden="true"/>
        <field name="key" title="Tag Name"/>
        <field name="value" title="Case Size"/>
        <field name="[B]owner_id[/B]" title="owner_id" detail="true" hidden="true" primaryKey="true" foreignKey="masterDetail_ProductItem.owner_id"/>
        <field name="value_type" title="value_type" hidden="true"/>
        <field name="namespace" title="namespace" hidden="true"/>
        <field name="description" title="description" hidden="true"/>
        <field name="created_at" title="created_at" hidden="true"/>
        <field name="updated_at" title="updated_at" hidden="true"/>
        <field name="owner_resource" title="owner_resource" hidden="true"/>
        <field name="admin_graphql_api_id" title="admin_graphql_api_id" hidden="true"/>
    </fields>
</DataSource>

[Isomorphic]

So you're not going to show us what your attempted at a fetchData() or filterData() call looks like, or anything about what resulted - an error, an empty query, nothing? Hard to provide feedback then..

With your FK declarations, you should be able to simply call fetchRelatedData() on the detail grid. But this is easy to do directly too - just call fetchData() where the criteria is the owner_id from the master grid.

[mkramer]

Sorry, not trying to be terse. I am days into this framework, and don't know what I don't know!