Partners and Developers

Shayne · ‎10-29-2018

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

Shayne · ‎11-14-2018

Here's a very simple example, creating a button on the title bar and a flash notice using App Bridge from a CDN. If you're testing this with your own app, make sure to replace my API key with your own.

We'll be adding more examples like this to docs in the coming days — but I wanted to get something up now to show that you can use App Bridge in the same way that you used the EASDK.

<!doctype html>
<html lang="en">
  <head>
    <title>Shopify App Bridge</title>
    <script src="https://unpkg.com/@shopify/app-bridge@0.8.2/index.js"></script>
    <script src="https://unpkg.com/@shopify/app-bridge@0.8.2/actions.js"></script>
    <script>
      var createApp = window['app-bridge']['default'];
      var getShopOrigin = window['app-bridge']['getShopOrigin'];

      var app = createApp({
        apiKey: '46f2c70aa5fd848bb7c67c0fd9f6045f',
        shopOrigin: getShopOrigin(),
	  });
	</script>
  </head>
	<body>
		<script>
			var actions = window['app-bridge']['actions'];
			var TitleBar = actions.TitleBar;
			var Button = actions.Button;
			var Flash = actions.Flash;

			var button = Button.create(app, {label: 'Trigger flash'});
			var flashOptions = {
				message: 'Flash message triggered',
				duration: 5000,
				isDismissible: true,
			};
			var flash = Flash.create(app, flashOptions)

			TitleBar.create(app, {
				title: 'This is a test title bar',
				buttons: {
					primary: button,
				},
			});

			button.subscribe(Button.Action.CLICK, data => {
				flash.dispatch(Flash.Action.SHOW);
			});
			
		</script>

		<p>
			Flash and title bar test
		</p>

	</body>
</html>

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

JoshHighland · ‎11-14-2018

Thank you. Examples like this are 100% appriciated.

Parcel_Intellig · ‎11-14-2018

Yes, Thanks Shayne, this example is extremely helpful!

MrPunkin · ‎11-14-2018

So did ShopifyApp.Modal.input() get deprecated from the EASDK tools? It stopped working about the time you folks launched this and is no longer listed in any documentation either, but it definitely used to exist.

ClementG · ‎11-15-2018

Shopify has a wonderful capability called development stores.

IMO releases that potentially break stuff should be first pushed to dev stores only, until Shopify Partners get a chance to test it out and find issues. Ideally a feature toggle button would allow us to help you by isolating bugs relating to a specific new feature.

That sounds like a good strategy. Why does Shopify insist on pushing straight to real stores?

Eduardo12 · ‎11-15-2018

The new SDK is breaking my app. Pagination now only occasionally functions and certain page loads from the embedded app buttons end up pointing to the wrong location. Who do I contact to elevate this issue? This app was fully functional for 3 years prior without issues.

Searchanise_Tea · ‎11-16-2018

We are reporting a new bug:

After opening an app that has buttons in the top bar in admin panel and then an app that doesn’t add any buttons, we can see the first app buttons in the second app.

Tested on Firefox 62, Linux in dev store

Bjorn_Forsberg_ · ‎11-16-2018

EDIT: Disregard this, I see it does do it correctly... just my paths were incorrect 😕

Hey Shayne,

I'm setting up the new Navigation Menu for my embedded apps, and just wondering how I se the initial navigation as active when the app loads.

For example, I have 2 navigation items in the top menu:

1. Email themes (path: /templates)
2. Analytics (path: /analytics)

When people arrive into my app, they automatically come to the Email Themes (/templates) page, however the navigation item does not indicate this. How do I get Email Themes to have the active styling on load? My expectation would be that it "knows" the Email Themes item should be active automatically, based on the path of the navigation item matches the current path.

Any tips you can give would be much appreciated.

Many thanks,
Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011

Seller_Panda · ‎11-18-2018

SUGGESTION

How about a beta testers program?

Each development store will be able to enable a "Beta tester" section that will allow the store to get all the new beta features you are planning to rollout and test it on that store.

the section will have a list of specific Beta features that can be toggled off and on to make sure issues are related specificly to one feature
The section can be toggled off and on (default to off), so developers who are developing a store for a customer can continue doing the same without changing anything.
The section will also contain a bug report system for each feature, this allows you to set a specific form of report to each feature, and get the exect data you need from the store owner for each report, this will reduce the amount of support emails and chats developers need to do to report a bug or get help.
If the Beta tester section is on, you can't deliver the store to a customer and make it live as some beta features will not work and might break the store, this makes sure that breaking changes stays in development time and doesn't go live.

PROS:

You will have beta testers that can actually test new features for real life situations and report to you bugs that you might never see, without the need of them to contact a specific person inside shopify.
You will be able to handle the reports as you see fit inside shopify internal network, without the need of this forum or any other method you used so far.
This will eliminate situtations like this forum post shows.
This is an easy thing to build and doesn't require that much of developing (development stores have a new section in settings, when the section turned on it shows beta features including links to the docs of the feature, each feature can be toggleed (looks like it is already built by Shayne comments), each feature have a link to a bug report form that sends shopify an email with the content of it).
This will allow us to report bugs directly to the developers without the need for them to answer us.
You can contact the Beta testers directly and ask them about new features you are planning, there is nothing better then feedback from real users!
You can enable this section only to selected group of partners and experts, but the group need to be big enough for this to be effective.

CONS:

This will require some time to work on it, but the time is low compured to the benefit.
This will add some sort of spam, can be evoided by a bug report limits per day, or captcha, and its not any different from your apps@shopify.com emails.
New features will take more time to be rolledout because they will need this extra beta phase, I think a month is enough time for testing a new feature, and the feature can still be left in the Beta testers program a month after the rollout to allow us report bugs that been missed some how.

As far as I can see this suggestion have a potential to make sure that shopify won't have another case like the app bridge case, I think with the new Beta testers section this thread could be avoided.

Alex_Dover_-_Un · ‎11-21-2018

Hi there,

I am wondering why the menu items have to be created via the app set up? With the buttons we are able to create this on the fly. I have menu items which I'd like to show and hide based upon permissions/plans so it would have been super helpful if I could have passed an array or similar to create the menu.

Do you ever see this being an option?

Thanks,

Alex

Seller_Panda · ‎11-21-2018

@AlexDover this is what the titleBar is for: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/titlebar

Alex_Dover_-_Un · ‎11-21-2018

Thanks, I will take a further look. The TtitleBar just looks like it covers buttons and breadcrumbs - I was hoping to be able to control the new navigation items in code rather than via the partner dashboard (https://help.shopify.com/en/api/embedded-apps/app-extensions/navigation/create-navigation-link)

Seller_Panda · ‎11-21-2018

Yes, the titlebar buttons ARE the navigation items, you can simply delete all button from the navigation menu and do it via the code with app bridge (if its working).

bolle · ‎11-22-2018

My app lives at /

I want to create a navigation link via the Partner dashboard that directs the customer to /

It doesn't let me do this for whatever reason.
Is this possible to implement?

Thanks.

Bjorn_Forsberg_ · ‎11-23-2018

Edit: I worked out how to reproduce the bad behaviour, steps added below

Hey Shayne,

Found what I think is a bug, in the way the new navigation menu items work. The issue is that query string parameters from the initial load of the app, are sometimes passed to future navigations using the menu links.

Example: I load up my app by using an admin link on the Shopify admin -> Orders page, by selecting 50 orders and clicking "Bulk actions" -->> "Load in app xxxx".

That link points to /orders and appends the selected ids, so the final url that comes to my app is /orders?ids[]=xxxxxxx&ids[]=yyyyyy etc, all is fine with that.

However, if after arriving on the /orders?ids[]=xxxxxxx&ids[]=yyyyyy page, I reload the page (Cmd+R) and then click on another menu item, the App Bridge keeps the ids[] and anything else in the query string.. when sending the request to the new page. So I end up with /draft_orders?ids[]=xxxxxxx&ids[]=yyyyyy which of course breaks things as those are order ids and not draft order ids.

How can I make sure that the App Bridge calls the navigation item links exactly as they are setup, and does not append previous query string parameters, even if the page is reloaded? I don't think I can do anything to stop it, as the navigation items are controlled by Shopify.

Reproduction steps:

1. Load the app using a bulk action from the Shopify admin, for example from the orders page
2. Reload the full page, this brings you back to exactly the same page as before, and includes the original query string params. All ok.
3. Click another navigation item, it now has the original query string parameters. Not ok.

Any help you can give would be much appreciated!

Have a great Friday!

Bjorn

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011

HunkyBill · ‎11-23-2018

There have been URL problems forever with the way Shopify stages links. You are lucky the ids are formatted correctly as ids[]=xxxxxx as for a while there they were all formatted as ids[][]=xxxxxx which pooched any Apps dealing with that. I noticed due to using Rails too, that we had to override the EASDK URL handling in terms of browser history (seems to be your issue too), as it was never in sync with reality. Was a hack job to fix that with some Jabvascript.

So ya. Go Shopify go! It takes years to get things right in this complex domain, and that is without constantly churning through internal technology stacks and design idea changes. So far, we are getting just glimpses of what it all may end up being.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com

JoshHighland · ‎11-29-2018

I have a POS app in the app store. I'm migration from the POS SDK to App Bridge but I'm seeing some strange behavior. Is App Bridge designed to work on POS? I cant ge't any Flash notification/error messages to appear inside of the Shopify POS app (iOS).

App Bridge Flash messages work on:

Desktop
Mobile safari
Shopify mobile iOS app (iPhone and iPad)

Fails on:

Shopify POS iOS app (iPhone and iPad)

Apps running in the Shopify POS app are hard to debug due to the in app browser and no introspection tools (seperate conversation), so I dont know if any JS errors are being thrown, but having success on all the other App Bridge supported platforms leads me to believe that there is an issue with POS + App Bridge.

Adem_Hamidovic · ‎12-12-2018

Hi Shayne,

You mentioned about a month ago that some new examples and documentation around the App Bridge would be coming, but so far the only documentation I can find are two links on the doc site. Are there any github repos showing examples? Some fleshed out tutorials anywhere on how to best use this? The code snippets provided in the current documentation don't provide much in the way of context or direction.

Partners and Developers

Shopify App Bridge

Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Re: Shopify App Bridge

Shopify Community

Support

Shopify

Quick Links