Can I add a button to call a function from within a ResourceList item?

Solved
Highlighted
Explorer
64 3 2

I need to be able to call a function when a ResourceItem is clicked. I have a ResourceList set up and can't figure out how to do this from the Polaris ResourceList or ResourceItem documentation.

Anyone have a simple example of this?  

 

 

0 Likes
Highlighted
Shopify Expert
4132 29 384

This is an accepted solution.

The simplest answers are to check out the ResourceList function:

promotedBulkActions={promotedBulkActions}

Any checked off items are sent to that function. So that is cool for more than one. But for just one item, in Resource Item rendering, use the short cut.

shortcutActions={shortcutActions}

There you can render a button and when clicked, do whatever you want with the ID of that resource. The following code offer a button that when pressed, navigates to a specific event, based on the item.

 

 const shortcutActions =
      [
        {
          content: 'View Reservations',
          accessibilityLabel: "View all Reservations from this Event",
          url: `events/${id}`,
        },
      ];

 

 

 

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
1 Like
Highlighted
Explorer
64 3 2

You are a lifesaver!

0 Likes
Highlighted
Explorer
64 3 2

Still missing something as nothing happens on clicking the button.  When the button is clicked, I want it to execute the Mutation specified with the variables from the row clicked. 

Here is what I have: 

 

const UPDATE_TAXCODE = gql`
  mutation productVariantUpdate($input: ProductVariantInput!) {
    productVariantUpdate(input: $input) {
      product {
        title
      }
      productVariant {
        id
        taxCode
      }
    }
  }
`;     

     <Mutation
        mutation={UPDATE_TAXCODE}
      >
        {(handleSubmit, { error, data }) => {
          const showError = error && (
            <Banner status="critical">{error.message}</Banner>
          );
          const showToast = data && data.productVariantUpdate && (
            <Toast
              content="Sucessfully updated"
              onDismiss={() => this.setState({ showToast: false })}
            />
          );
          return (
            <Frame>
              <Page> 
                   ...
                          <ResourceList
                            resourceName={{ singular: 'code', plural: 'codes' }}
                            items={[
                              {
                                id: 6,
                                taxCode: '01111',
                                industry: 'Retail',
                                category: 'Clothing and Related Products',
                                name: 'Clothing',
                              },
                            ]}
                            renderItem={(item) => {
                              const { id, taxCode, industry, category, name } = item;
                              const productVariableInput = {
                                id: variantId,
                                taxCode: taxCode,
                              };
                              const shortcutActions =
                                [
                                  {
                                    content: 'Map TaxCode',
                                    accessibilityLabel: "Map this TaxCode to Product",
                                    variables: { input: productVariableInput },
                                  },
                                ];
                              return (
                                <ResourceList.Item
                                  id={id}
                                  taxCode={taxCode}
                                  name={name}
                                  category={category}
                                  industry={industry}
                                  shortcutActions={shortcutActions}
                                >
                                </ResourceList.Item>
                              );
                            }}
                          />
                      ...
              </Page>
            </Frame>
          );
        }}
              </Mutation>

 

 

This is the first mutation I am trying to implement in a ResourceList and am probably missing something obvious. 

0 Likes
Highlighted
Explorer
64 3 2

Still missing something as nothing happens on clicking the button.  When the button is clicked, I want it to execute the Mutation specified with the variables from the row clicked. 

Here is what I have: 

 

const UPDATE_TAXCODE = gql`
  mutation productVariantUpdate($input: ProductVariantInput!) {
    productVariantUpdate(input: $input) {
      product {
        title
      }
      productVariant {
        id
        taxCode
      }
    }
  }
`;     

 <Mutation
        mutation={UPDATE_TAXCODE}
      >
        {(handleSubmit, { error, data }) => {
          const showError = error && (
            <Banner status="critical">{error.message}</Banner>
          );
          const showToast = data && data.productVariantUpdate && (
            <Toast
              content="Sucessfully updated"
              onDismiss={() => this.setState({ showToast: false })}
            />
          );
          return (
            <Frame>
              <Page>
                <Layout>
                  {showToast}
                  <Layout.Section>
                    {showError}
                  </Layout.Section>
                  <Layout.Section>
                    <Card title={displayName} >
                      <Card.Section>
                        <p>Variant ID: {variantId}</p>
                        <Form>
                          {/* <FilteredTable utmItems={utmjson} /> */}
                        </Form>
                      </Card.Section>
                    </Card>
                  </Layout.Section>
                  <Layout.Section>
                    <DisplayText size="large">{name}</DisplayText>
                    <Form>
                      <Card>
                        <Card.Section title="Product Tax Codes">
                          <ResourceList
                            resourceName={{ singular: 'code', plural: 'codes' }}
                            items={[
                              {
                                id: 6,
                                taxCode: '01111',
                                industry: 'Retail',
                                category: 'Clothing and Related Products',
                                name: 'Clothing',
                              },
                            ]}
                            // items={items}
                            renderItem={(item) => {
                              const { id, taxCode, industry, category, name } = item;
                              const productVariableInput = {
                                id: variantId,
                                taxCode: taxCode,
                              };
                              const shortcutActions =
                                [
                                  {
                                    content: 'Map TaxCode',
                                    accessibilityLabel: "Map this TaxCode to Product",
                                    variables: { input: productVariableInput },
                                  },
                                ];
                              return (
                                <ResourceList.Item
                                  id={id}
                                  taxCode={taxCode}
                                  name={name}
                                  category={category}
                                  industry={industry}
                                  shortcutActions={shortcutActions}
                                >
                                  <h3>
                                    <TextStyle variation="strong">{name} [{taxCode}]</TextStyle>
                                  </h3>
                                  <div>{industry} / {category}</div>
                                </ResourceList.Item>
                              );
                            }}
                          />
                        </Card.Section>
                      </Card>
                    </Form>
                  </Layout.Section>
                </Layout>
              </Page>
            </Frame>
          );
        }}
      </Mutation>

 

 

This is the first mutation I am trying to implement in a ResourceList and am probably missing something obvious. 

0 Likes
Highlighted
Explorer
64 3 2

I tried adding the handleSubmit function into the shortcutActions but am not getting the syntax right and am getting unexpected token error.

                             const shortcutActions =
                                [
                                  {
                                    content: 'Map TaxCode',
                                    accessibilityLabel: "Map this TaxCode to Product",
                                    handleSubmit({
                                      variables: { input: productVariableInput },
                                     })                                 
                                  },
                                ];
   

 

0 Likes
Highlighted
Explorer
64 3 2

This is an accepted solution.

Well in the end it was something very simple and now I have this working. I was missing the onAction call:

const shortcutActions =
[
  {
    content: 'Map TaxCode',
    accessibilityLabel: "Map this TaxCode to Product",
    onAction: () => {
      const productVariableInput = {
        id: variantId,
        taxCode: taxCode,
      };
      handleSubmit({
       variables: { input: productVariableInput },
      });
    }                                    
  },
];

 

0 Likes
Highlighted
Shopify Expert
4132 29 384

This is an accepted solution.

Cool that you can modify tax codes like this. But since it is a manual process where the answer is pre-set ie) pressing the button for a Resource Item sets a tax-code, why would not just run a bulk update job where you set the tax codes with no user intervention?

 

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
1 Like
Highlighted
Explorer
64 3 2

The component being built is the initial product mapping for a merchant to an external taxCode database. It is a manual process as some items are exempt from taxes, some have different rates, etc. The taxCode will be stored in the Product table and used later to call an external API. 

First the user selects one product to be mapped, then selects the type of industry / category and then chooses the specific taxcode that applies to that product.

0 Likes