Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Few questions about my app

Avatar

Level 2

I'm using AEM Mobile for the first time for a new app, and I have a few questions.

• How can I map different cards onto various collections on one page? Right now all the collections are going under one card.

• The fonts I uploaded are not coming through on the AEM Preflight app on the iPhone and iPad. In the Font section in the dashboard, there are check marks under Device Font only. Is that a problem?

• I created a dynamic banner that is showing up on the AEM Preflight app for iPhone but not on the AEM Preflight app for iPad. Is this an issue with my HTML/CSS, or the AEM Preflight app for the iPad?

• For the cover page, I would like to use different images for the Phone, Table, and Desktop layouts. What's the best way to do this?

6 Replies

Avatar

Employee

For mapping cards, see this article and video: Create cards and layouts in AEM Mobile apps

Fonts are not supported in the AEM Preflight app. Instead, build a custom preflight app.

For the dynamic banner, is your AEM Preflight app updated? If you're using an older version, it won't work.

For the cover page, it really depends on how much work you want to do. If you want different content for phones and tablets, you can create a project with two top levels, and specify different content for phones and tablets (the desktop uses the tablet version). However, there's more overhead in this approach. If possible, use the same content for phones and tablets so that you avoid extra production work.

Let us know if you have more specific questions for any of these issues.

Avatar

Level 2

Thank you for this response. For the issue with multiple covers, I would prefer to only have one top level, since that's really the only page that would have different content. I could create an HTML article for the cover, but when I preview it on a device, it does not have the top navigation, which is different than pages built from the AEM dashboard. Right now the cover is a full page JPG, and I want it to link to the TOC. Is there a way to make the cover JPG link to the TOC, and have a way that the top navigation shows up on the cover page?

Avatar

Level 2

Also, how can I make a custom preflight app, and how can I view that on my devices?

Avatar

Employee

For the cover issue, I don't understand the question. Please clarify.

For the custom preflight app, see this article:

Preview AEM Mobile content using AEM Preflight

You might also want to look at these learning resources:

Video tutorials for AEM Mobile

Preview AEM Mobile content using AEM Preflight

Avatar

Level 2

I think I figured it out with the cover page. But trying to clarify the question anyway, I wanted to have two images for the cover: one for the smaller screen and the other for the larger screen, and also wanted to keep it one-level. So I created an HTML article for the cover with media queries. With HTML articles, the top navigation bar does not show up on the devices, unlike on pages created within the AEM dashboard, where it shows up, and stays there automatically. Since I wanted to be able to tap the cover image to go to the TOC page, and also wanted a way for the top navigation bar to show up, I added top-margin to the cover image. That bumped the image down, so when I tapped on the top part of the screen, the navigation bar showed up.

Thank you for those links, and I will watch the videos. It seems like a very long process to create a custom preflight app, with signing it, and everything that comes with that (getting the .ipa file, a .p12 development certificate, and a development mobileprovision file). Is there another way to see the custom fonts loaded on the device, or is creating a custom preflight app the only way?

Avatar

Level 2

I was able to get a signed .ipa file. Now how can I view the preflight app with the fonts loaded?