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.

Using Renditions

Avatar

Level 3

Hello,

First of all... what a great feature.  I wanted to know how to exactly "apply" the rendition to your layout?  I have gone through setting up the "Tablet" "Phone" "Web" renditions... and have clicked the "SAVE" button... but when I return to my app to see the changes... nothing happens.

any ideas?

13 Replies

Avatar

Level 3

I figured it out!

You need to apply the "Layout" to your collection.

Avatar

Level 3

Hi Bob,

having issues now with the renditions.  do you know if there will be a tutorial video coming soon to show how the layouts work between the "Tablet" "Phone" "Web" ?

I am applying the layouts I want to the desired rendition but nothing is changing.  It's like something else is over-riding everything.

Avatar

Employee

No video tutorial plans in the near future. Colin will likely create a set of layout template videos in a month or two.

What method are you using to view your renditions? Are you using the DPS Preflight app or a custom app?

Avatar

Level 4

I'm not sure if this helps, but this was the trick for me: I had to clean the cache (Android Phone) from the DPS Preflight App in order to get the renditions running.

–Haeme Ulrich

Avatar

Level 3

Hi Bob,

I am testing on both.  The Preflight app and the custom app, for "font" purposes etc.

For some reason, when I am doing the renditions I start with the "Tablet" version, everything looks nice... all my cards match up etc.  When I create a "Phone" rendition I go through the set up... but my content wont map to the cards.  I have made sure that all the keywords, departments etc all match up... When I go into the "Mapping" area to try and map content the only cards that have content mapped to them are the "Tablet" cards.

any ideas what it could be?  I have cleared cache like Haeme suggested.

Avatar

Level 6

In the past I'd build separate cards for phone and tablet --- but with this new setup I don't. A layout now can have separate info (layout rendition) but all share one set of mapping controls. So a "feature" article that has an internal keyword of "feature" will map to a particular card.

When you add a layout rendition for phone, you then can adjust all the properties for the layout (change column count or background color) and change the font size and card type -- these differences show based on the device that's viewing the collection.

So I don't need to design a separate card for the phone, but I change the properties for that one card to work better on a phone.

HTH

Avatar

Employee

Colin is right. The same cards and mapping rules apply to all renditions. For each card, you can have different settings for phones, tablets, and the web.

Avatar

Level 3

Hi Colin,

Thanks for responding.  I am trying what you're talking about right now.  The only issue I have is that my "Phone" Layout is defaulting to the "Tablet" layout.  My "Tablet" layout is 4 columns, and my "Phone" layout is 2 Columns.  But Phone rendition will not apply the 2 Column layout.

I have looked at my collections and made sure that they are using the "Main" layout. But still having issues.

any other ideas what might be happening?

thanks again for the insight.

Avatar

Level 6

I've had really predictable experiences with iPhone and iPad -- easy differentiation of phone and tablet content. But I've had some less predictable results on Android where I was sure that the device was a phone but it would show tablet content instead. So perhaps that's an element you're experiencing. Maybe.

Bob and I have worked through some curious approaches to working with these layout renditions, each has impacts.

The major point in the workflow is when you create a layout rendition, this will basically generate a "copy" of the properties inside the layout template. If you start with a tablet layout with 12 columns, then create a phone layout rendition -- it'll also have 12 columns, initially. Any property changes you apply to the phone layout rendition are differences.

-- I tend to build the tablet with 12 columns.

-- The phone layout rendition starts with 12 columns too, but I change this to 2 columns. (Personal approach)

-- The original default card is four column, I get a red warning on the default card now when I look at the phone layout rendition!

-- I have to change the default card size to work on the phone layout rendition... and repeat for any other cards that have similar issues.

OTOH, Bob doesn't like changing the column count on his phone layout rendition. So all his cards still fit/work, but he'll still go tweak them to work better on the phone layout rendition. He mostly doesn't get the red warnings that I get.

Avatar

Level 4

Hi Colin,

I am currently working with a "2 Top Level Nav Collections" app.  Would that have anything to do with why I might be experiencing this issue?

I have 2 Collections.  One Collection for "Phone" and another for "Tablet".  When I use the Layout Templates and it asks me to "Import Collection" would it matter what "Collection" I import?  I have been importing the Collection for my "Tablet" Launch Screen.  I have tried what you laid out for me in your previous post... but still getting the same thing.

thanks again for the information.

Avatar

Level 6

If your project has two top-level nav: then you can organize the content for phone and tablet separately. Different content for phone and tablet now is the primary reason to have two top-levels.

Each of your top-levels (default tablet and default phone) must have content -- this controls what you see when the app launches, the right-swipe experience, and your app menu. IF YOU DON'T HAVE CONTENT, you won't see anything...

Of course, you could have the same organization of content (collections, article, banners) in both of your top-levels -- so you'd see the same things on both phone and tablet... but the presentation of a browse page now can be different using layout renditions (part of Layout Templates.)

So, when you're using Layout Templates, and it asks you to import a collections, you're identifying the content you want to see as you design the layout, cards, mapping rules, and layout renditions. It's just the information you're going to use while designing.

It may all be the same content for both phone and tablet!

When you're done, you can just save the Layout Template, or you can save it and apply it to your working collection. That's up to you. You will likely go to Collections and apply a Layout Template there.

If I have a collection called "Launch" and it's the first thing in both my default tablet and default phone (top-level collections) -- I can use a single Layout Template on that one collection. Nothing new there. THE NEW THING is that that one Layout Template can have two renditions, and it can look different on phone and tablet. One collections, two presentations using layout renditions.

Collections are about organizing content, Layout Templates are about presentation.

I used to build duplicate collection systems, one for phone and one for tablet, solely because I wanted different layouts on phone and tablet. I don't have to do all this extra work if the content is the same. <--- Splendid!

HTH -- Colin

Avatar

Level 3

Thanks Colin very much for your explanation!

Everything is working like a GEM!!!

Thanks again.