ShopifyApp/AppBridge Bar buttons are not merged into the main title bar

Highlighted
Shopify Partner
2 0 1

Hi.

When I try to use EASDK's Bar.initialize method the regular way:

ShopifyApp.Bar.initialize({
	buttons: {
		primary: {
			label: "aaa"
		}
	},
	title: 'xxxxx',
});

This is what I would see inside my App settings screen:

And that is big change from what I was seeing there only a few weeks earlier:

 

As you can see there wasn't any extra menu bar back than and that was perfect for our app.

 

I thought the problem is in the EASDK, but switching on AppBridge didn't help either.

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script type="text/javascript">
	var AppBridge = window['app-bridge'];
	var app = AppBridge.createApp();
	var button = new AppBridge.actions.Button.Button(app, {label: 'aaaa'});
	var bar = new AppBridge.actions.TitleBar.TitleBar(app, { buttons: {
		primary: button
	}});
</script>

 

So does anyone know if this is a bug or was this major change in behavior intentional?

 

0 Likes
Shopify Staff
Shopify Staff
1558 78 233

This was a design change made to how the app bridge components represent themselves in tandem with the title bar, which had some changes made to it directly as well.

 

With that said, feedback is extremely valuable. So let us know what your thoughts are regarding this change (and any others).

 

Cheers.

0 Likes
Shopify Partner
1843 172 548

I'll join the party if I may?

 

I understand the importance of context i.e. knowing what app the merchant is using and who the vendor is. However, having an entire bar for those 2 trivial bits of information is a pity IMO. Especially because the action buttons are now delegated to the second bar and the actual app scrollable area is reduced.

 

Ideally if wishes came true, I'd prefer the app bridge bar to contain the app name / logo and be a drop down that contains app info and version, settings and of course vendor etc. The usual culprits found in such app info menus / drop downs. The right side would be reserved for contextual actions such as buttons.

 

Also... it would be sooooo sweet if the currently used app could actually be shown in the main navigation and have it's own sub-menus. I've seen too many apps with a second navigation panel - that's just horrendous! *cough* I mean, it is not user friendly ;-)

 

Best wishes!

 

I turn coffee in to code - since 1998
1 Like
Shopify Partner
2 0 1

Thanks for the quick reply Alex!

 

@Alex wrote:

With that said, feedback is extremely valuable. So let us know what your thoughts are regarding this change (and any others).

Well, I can't say we're happy with this silent update. As far as I can see it wasn't even announced anywhere so I only now accidentally noticed something is wrong at our settings page.

As @KarlOffenberger had already said this extra bar with a single button inside is just taking too much precious space now.

So If you decide to keep it, we would have to stop using that fancy TitleBar at all and try to put that button somewhere into our own markup instead. We wouldn't want to do this though, so could you please consider reverting this update if possible?

 

As for the "any others", I would also love if you had restored the old "setIcon"'s method functioning too. It was depreciated several months ago, but it is still available via app.js. Yes, I understand I can change that icon via app settings, but we need to be able to use different variants of our logo: one inside the app store and another inside the settings. One of the reasons is the different background colors -- not every picture looks both good on white and on blue-gray. 

 

Regards.

1 Like
Shopify Partner
1 0 0

A little new here, so excuse me if I'm not using the forum correctly.

I've been playing around with App Bridge for the last day or so... trying to figure out how it works.

So is it true that I can only display one button in the title bar? Or am I not using this correctly?

 

Currently setting it with the following:

 

tbar = TitleBar.create(app, {title: "A subtitle"});
buttons.publish = Button.create(app, {label: "Publish"});
tbar.set({buttons: { primary: buttons.publish }});

Is that the right way to do it? And if so, why doesn't it display a second button when I try:

tbar.set({buttons: { primary: buttons.publish, secondary: buttons.preview }});

Thanks in advance for your help!

0 Likes
Shopify Staff
Shopify Staff
1558 78 233

@houund-dev I'd recommend questions specific to how to use app bridge in a new thread, that might be a bit debatable but I feel this thread is best for discussing the changes we made to title bar behaviour and feedback on that specifically.

 

With that said, you should be able to create a primary button and a secondary button or grouping of secondary buttons on the titlebar: https://help.shopify.com/en/api/embedded-apps/app-bridge/actions/titlebar#create-a-title-bar-with-se...

 

If what's shown there isn't working for you, it'd be nice to see more of your code to see what might be happening.

 

Cheers.

0 Likes
Tourist
5 1 0

Hey did anyone manage to figure out how to add buttons to the main title bar old-style? I really need this feautre in my app as adding another bar on a small device just for a button isn't viable as my app is already going to be content heavy / having other toolbars on the top. One or two toolbars can look fine but when you have multiple stacked on top of each other like this it just looks lazy, any help with the code for app bridge would be uber appreciated as im banging my head against the wall trying to get this to work

0 Likes
Shopify Partner
73 0 13

Just wanted to also weigh in on this matter.

I'm not a fan of the double title bar. It wastes a lot of screen real estate for very little added value.

The one thing it does that is useful is that it displays the app icon.

 

I'd very much appreciate having the option to select if I want one or two bars.

In the case of our app it just makes absolutely no sense to have two bars and rolling back to the pre App Bridge version is not an option because we need features that are not available in ShopifyApp (product variant picker).

Bart Coppens | Limoni Apps | Building apps for Shopify since 2016
1 Like