How to use a VIEWBOX as injectible content in a controlbar disclosure

[cptutrecht]

In the releasenotes of 4.3 there is an example of how a LIST control can be used in a disclosure
"Showing a List in a Disclosure, videos of 2016-09-16"

I implemented a menu system in a VIEWBOX and want to use the controlbar / disclosure method, as described above using the list.
The layout of Viewbox is like a list.
But no luck: the viewbox-menu is not shown in the disclosure.

If i leave the viewbox in a panel I can controle show / hide of course with the controlbar and everthing keeps working, but I guess that is suboptimal.

Anybody luck with using a viewbox as injectible content in a disclosure?

[Davidk]

Re: How to use a VIEWBOX as injectible content in a controlbar disclosure

Can you post an example UX of what you've tried? That way we don't have to build from scratch and start doing things differently from what you have set up.

[cptutrecht]

Re: How to use a VIEWBOX as injectible content in a controlbar disclosure

Can you post an example UX of what you've tried? That way we don't have to build from scratch and start doing things differently from what you have set up.

Thanks David for your offer to have a look at it.

I stripped down the component a little so that one can see the issue without databaseconnection.
By doing that I discovered that I probably created a javascript error, just still can not find it.

In the zip file are two component

1. Original situation (viewbox-menu in panel) + as test a copy of the viewbox in an injectible container to use in a disclosure.

2. The situation i want to achieve: the same component without a panellayout and a menupanel.
If i can use a disclosure I only need the panelnavigator as one can see.

There are two problems:

a. in live preview there is a javascript error that prevents the viewbox from rendering in the disclosure.
When publishing that error didn't show, but the problem viewbox doesn't render either in the disclosure.

b. in working preview the error is absent and the viewbox renders in the disclosure. Only slightly different from the way it renders in the panel card: it shows a blank line between the menu-items.....

Thanks in advance for looking at it.

[Davidk]

Re: How to use a VIEWBOX as injectible content in a controlbar disclosure

From what I can see in m_home_disclosure... this works. In your Discloser onSize event you have lObj.resize() which doesn't exist for lObj. So comment that out. Even with that error the viewbox renders for me in LivePreview (with js error), Working Preview (without js error) and in the Chrome browser (console js error for lObj.resize()).

You don't need the resize. Overall... is this what you're trying to achieve?

Disclosure.PNG

[cptutrecht]

Re: How to use a VIEWBOX as injectible content in a controlbar disclosure

From what I can see in m_home_disclosure... this works. In your Discloser onSize event you have lObj.resize() which doesn't exist for lObj. So comment that out. Even with that error the viewbox renders for me in LivePreview (with js error), Working Preview (without js error) and in the Chrome browser (console js error for lObj.resize()).

You don't need the resize. Overall... is this what you're trying to achieve?

[ATTACH=CONFIG]42794[/ATTACH]

Thanks David,

1. lObj.resize() I may not need. This was from the releasenote video, and probably only appropriate in case of a List, not in case of Viewbox. So in both components I disabled it.

2. For viewing exact what I want to achieve I should have added the Sass changes I made for the Alpha stylesheet and provide our custom svg icons to the example. They are attached. I want the header and the disclosure have the same color (Light yellow background, dark blue font and icons).

3. From the screenshots below you can see what I try to achieve, and what is going wrong:

a. first image (m_home_panelmenu-livepreview): You can see under the button Panel how it should look
And under the button disclosure that only the disclosure opens. And that the viewbox content is shown BELOW the Iphone simulator

m_home_panelmenu-LivePreview.PNG


b. second image in component m_home_disclosure-LivePreview: same issue als in image a.

m_home_disclosure-LivePreview.PNG


c. third image component m_home_disclosure-WorkingPreview: It's more or less oke, only that there is a blank line between the menu option compared to the situation that the viewbox is opened in a panel (see image a)


m_home_disclosure-WorkingPreview.PNG

Hopes this makes it more clear what driving me nuts.....

[Davidk]

Re: How to use a VIEWBOX as injectible content in a controlbar disclosure

I'm not seeing any of the odd viewbox oddities that you're showing. Having said that, I have noticed in the past some behaviour of Injectible Content used in a mobile app when that content is positioned inside the panel navigator in the UX builder. So, just in case, move your Injectible Content container to the buttom of your UX... the very bottom... not inside anything else. I always add a note to my Injectible Containers as well... tell others... and me... where they are used.

Overall, it seems, that the only issue you're actually presenting is that there is too much space between menu options.

I wouldn't change the spacing of the menu items. That looks quite appropriate for a mobile menu. Any smaller and you're going to get a lot of mis-taps. However, if you really want to, then just add a bit of css to your Viewbox CSS tab. You're using the Alpha Style, and you've established the style for your Viewbox items as {dialog.style}ListItem.

There are no extra blank lines between your items... it's just their height. So... add this to your Viewbox CSS...

.AlphaListItem{
	height:25px;
}

Disclosure2.PNG

[cptutrecht]

Re: How to use a VIEWBOX as injectible content in a controlbar disclosure

Thanks David,

I take your advice concerning the spacing, indeed better if there is more space.
I give up on implementing the viewbox in this component and stick with the panel. Moving the injectible as you suggest container does not solve my problem.
And if you don't see the oddities, creating a bug report for alpha is also not very succes promising...... certainly not with a component throwing javacript error in livepreview.
(and if I create a very basic UX the problem doesn't exist either at my machine)

I'm not seeing any of the odd viewbox oddities that you're showing. Having said that, I have noticed in the past some behaviour of Injectible Content used in a mobile app when that content is positioned inside the panel navigator in the UX builder. So, just in case, move your Injectible Content container to the buttom of your UX... the very bottom... not inside anything else. I always add a note to my Injectible Containers as well... tell others... and me... where they are used.

Overall, it seems, that the only issue you're actually presenting is that there is too much space between menu options.

I wouldn't change the spacing of the menu items. That looks quite appropriate for a mobile menu. Any smaller and you're going to get a lot of mis-taps. However, if you really want to, then just add a bit of css to your Viewbox CSS tab. You're using the Alpha Style, and you've established the style for your Viewbox items as {dialog.style}ListItem.

There are no extra blank lines between your items... it's just their height. So... add this to your Viewbox CSS...

.AlphaListItem{
	height:25px;
}

[ATTACH=CONFIG]42803[/ATTACH]

[Davidk]

Re: How to use a VIEWBOX as injectible content in a controlbar disclosure

I was getting a js error when you had that .reszie() method in there... which you can't apply to Viewbox. But, with that .resize() gone... no js errors. When you run this in a browser... Chrome... are you getting js errors at the console? You're using build 3962... right? If you're using the component you sent me, I can't really see how it's not working for you. No issues here.