Shopify App Bridge

Shayne
Shopify Staff
203 9 47

App Bridge rollout meter : 100%

Revised Launch Date : Thursday, November 8th, 2018.


We’re excited to announce that we're launching a new way for apps and channels to be embedded directly into the Shopify admin, including Shopify mobile and POS. This new library is called Shopify App Bridge. This consolidated tooling brings together the functionality previously provided by the Embedded App SDK and the POS App SDK and makes building and testing embedded apps easier through:

  • Modern development workflows (npm, TypeScript support, and more!)

  • Support for Redux DevTools

  • More and better error reporting

  • Strict versioning using semver

 

This update is currently being rolled-out to all current consumers of the EASDK, and since it’s backwards compatible, no new work is needed to get it set-up. It’ll also be available as open source on GitHub soon as well.

The titlebar has had a much needed redesign, adding extra space for future features and separating primary actions from secondary (screenshot below).

Embedded apps using App Bridge will also be able to access a new navigation menu builder, available as a new app extension in the Partners dashboard.

These improvements will help cut down your development time and ensure your app renders consistently across platforms—desktop, mobile, and Shopify POS.

For more information, please check out the docs here.

EDIT: 
Some people have been emailing in asking about the why of these changes, specifically the change to the title bar structure. 

We're working towards a future that includes more titlebar actions, with deeper, more extensible connections into the product. Offering support, leaving reviews, and a ton of other ideas are on the table. The old title bar just didn't give enough space to offer the kind of improvements that we're working on, so it made sense to release it with App Bridge.

The only method that was removed was ShopifyApp.Modal.input, due to it's exceptionally low use (only 77 total clients). In it's place, iFrame Modals can be used,

We're always looking for feedback; post it in the forums, or email us and we can set up a call — we're happy to talk about the future of the platform and want to make sure your voice is heard.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Replies 77 (77)
Bjorn_Forsberg_
Shopify Partner
279 4 56

Hey Shayne,

Found another issue on my test account. The issue is that the new button/nav bar from the previously accessed app is displayed when logging into another app, until the new app is "ready".

Steps to reproduce:

1- Login to any app that adds buttons to the top bar. Wait for the app to finish loading and make note of the buttons shown:


2- Go to Shopify Admin -> Apps
3- Login to any other embedded app
4- You'll notice that while the app is loading up, the buttons from previous app are displayed.

Hope it's useful. I have to admit, it worries me that I've found 3 issues on my beta and I'm not even looking for them.. just stuff I notice as I'm going about my normal business.. and this is rolling out to merchants already :/

Either way,  have a great Friday! :)

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
Dan_Sundy
Excursionist
25 0 3

I never got an answer on how to remove the byline with Polaris. It doesn't make any sense in our app.

I understand that there isn't enough room for all the prospective features in one bar but it's clear that the "by Company" text is just there to take up space. It doesn't even link to anything.

If possible, I would like to opt out as well—at least until Polaris v3.0.0 comes out and the documentation is improved.

HunkyBill
Shopify Expert
4615 54 531

Waiting on Polaris, like waiting on Godot.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Shayne
Shopify Staff
203 9 47

I understand that there isn't enough room for all the prospective features in one bar but it's clear that the "by Company" text is just there to take up space. It doesn't even link to anything.

The "by Company" text is there to clearly display to merchants that this is an experience that's not built by Shopify. This becomes increasingly important as Polaris includes more and more features.

 

If possible, I would like to opt out as well—at least until Polaris v3.0.0 comes out and the documentation is improved.

Polaris v3 was being blocked by App Bridge launch, but it's ready to go out now. If you want to opt out for the time being, send me an email with your app name and I'll get it done.

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Maris
Shopify Partner
308 5 66

+1 from me as well to be able to bring back the top bar to one row.

We don't have too many buttons there, and this additional row really takes up so valuable app screen space, with no good reason for that.

 

Just an idea to consider for a solution:

1. "by <Company" could be put right after the app title.

2. Make the buttons jump to a second row only if there is not enough space for them to fit in the first row (wrap all or none to the second row). Making this as a responsive-UI experience.

 

Really appreciate if you can consider this...

 

Matrixify (Excelify) | Bulk Import Export Update Migrate | https://matrixify.app
Parcel_Intellig
Shopify Partner
79 1 36

Whatever change was rolled out recently seems to have broken to query string in a modal.open request. Can this be rolled back please?

Eduardo12
Tourist
11 0 5

As a dev Shopify Gurus complicate transmitting information on issues that need to be addressed by Shopify devs. They have zero understanding of the more technical side of Shopify. Shopify needs a line of communication between their dev team and app developers if they want to succeed. I've given up on trying to get issues resolved and instead work around the bugs knowing that hundreds of other devs will end up falling into the same pitfalls.

Kris_Doyle
Shopify Partner
91 0 20

Hi All,

I've have a Modal from the old EASDK that's no longer working since App Bridge.

The code to open it is:

ShopifyApp.Modal.open({
    src: '<the_url_here>',
    title: 'The Title',
    height: 600,
    buttons: {
        primary: {
            label: 'Primary',
            message: 'importForm_submit',
            loading: false,
            callback: function (label) {
                ShopifyApp.Modal.close();
            }
        },
        secondary: {
            label: 'Secondary',
            callback: function (label) {
                ShopifyApp.Modal.close();
            }
        }
    }
});

And the form that populates the Modal is:

<form data-shopify-app-submit="exportForm_submit" class="form-horizontal" method="post">
   <input name="_token" type="hidden" value="<csrf_token>">
   <input name="shop" type="hidden" value="<shop>">
   <input name="collectionId" type="hidden" value="<collection_id>">
   <input name="type" type="hidden"  value="<type>">
   ...
</form>

There's other stuff in there but the <form> tag is the important bit.

There's two problems I'm running into:

  1. The height param is being ignored making the modal too short which creates a scroll bar
  2. When I click the Primary button, the submit is no longer being triggered so the form is never submitted. The callback fires and closes the window but nothing else happens

This has been working up until the release of App Bridge. My production app still works but App Bridge hasn't been enabled for it yet thankfully.

Any ideas?

EDIT:

After messing around a bit, I have a workaround:

  1. Use ShopifyApp.Modal.setHeight() to specify the height within the modal window
  2. Instead of relying on the postMessage, I added an ID to the form, and then I added ShopifyApp.Modal.window().document.getElementById('formId').submit(); to the callback function in the modal host window to force the submit.

Although this works, it would be nice to know why it changed. Not critical anymore but good to know all the same :)

Thanks,
Kris

Kris_Doyle
Shopify Partner
91 0 20

Hi All,

One other problem I'm having is with the resource picker. The Collection picker is now returning some incorrect data for Smart collections. It also no longer returns the Smart collection "rules".

Below is the object returned for one of my Smart collections from the Collection Picker (this is a published collection in the Online Store):

body_html: "<p class="well no-product-html">No HTML available for this collection.</p>"
handle: "specific-shoes"
id: 404960718
image: {alt: null, created_at: null, height: null, src: "https://cdn.shopify.com/s/files/1/1370/5471/collec…5663-c33c-4e48-8e71-61836403ef08.jpg?v=1484187967", width: null}
published_at: null
published_scope: null
sort_order: "best-selling"
template_suffix: null
title: "New Sneakers"
type: "custom"
updated_at: "2017-11-04T20:38:36Z"
  1. The "type" is "custom" but should be "smart"
  2. There are no "rules" present in the data
  3. I'm pretty sure the "published" data (scope and date) are incorrect as well since this is a published Smart collection at the moment.

Thanks,
Kris

 

Kris_Doyle
Shopify Partner
91 0 20

Sorry, one more.

According to this if you don't include a "style" setting of "danger", the Confirm Modal will default to the primary color (blue). I don't set the style on any of my confirm boxes and they're all defaulting to "danger" red since the release of App Bridge. I've tried putting other styles in but it always defaults to "danger".

Thanks,
Kris