Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

[AEM Webinar] [25 April 2017] Join Ask the Community Expert session on Building responsive layouts using Bootstrap and Angular JS

kautuk_sahni
Community Manager
Community Manager
Topic :- Building responsive layouts using Bootstrap and Angular JS

Speaker:- Lokesh BS, Digital Solutions Architect at TechAspect

Date & Time :- Apr 25, 2017 08:30pm to 09:30pm (India Standard Time) OR 11:00 am to 12:00 (EST)

Registration Link:- https://adobe.ly/2opkseT

Direct Connect Room (even if you are not registered) :- https://communities.adobeconnect.com/aemtech/

Looking forward to seeing you all in the session. We already have 110+ registration.

Thanks and Regards

Kautuk Sahni

12 Replies
Sukrity_Wadhwa
Employee
Employee

Looking forward to a fulfilling and enriching experience! 🙂

brett_birschbac
Level 2
Level 2

A few questions that there was no time left at the end to discuss:

1) Do you recommend mixing both the AEM OOTB grid and Bootstrap?  The demo showed using Bootstrap for hard-coded grid functionality such as a column control.  However, what if you have a full-width column in your template but authors want to put two half-width components within that?  To do that, they need to use Layouting mode to modify the components to be 6 columns wide within the parent full-width column, and for that I believe they need the AEM OOTB grid, correct?

2) Is there any way to make AEM use the Bootstrap grid for author Layouting functionality, so we can avoid the import of both Bootstrap's and AEM's grid code to satisfy both the hard-coded and authored grid use cases?

3) Regarding using Angular to render a component, we found that when an author adds/edits a component on the page the Angular JS code will not execute on that new HTML because Angular has already run on initial page load and adding/editing a component does not trigger angular to run again.  A heavy-handed approach to this is to add an editConfig to all angular components that refreshes the page on all adds/edits, but this feels like solving the problem with a sledge hammer.  Another approach (which I have done) is to instrument (a.k.a. hack) the AEM authoring JS code to trigger an Angular digest cycle on add/edit of a component on the page.  This worked great, but required a lot of digging into the specifics of the authoring UI and monkey patching in a solution.  So my question is, is there a standard way of handling Angular JS components so they re-render on add/edit to the page w/o a full page refresh?

kautuk_sahni
Community Manager
Community Manager

I have asked Lokesh(the speaker) to have a look at these questions.

~kautuk

brett_birschbac
Level 2
Level 2

@kautuk  Any reply from Lokesh on my set of questions?  Looking forward to understanding the answers so I can better advise clients.

kautuk_sahni
Community Manager
Community Manager

I Have again pinged Lokesh regarding this.

~kautuk

bsloki
Community Advisor
Community Advisor

1) Do you recommend mixing both the AEM OOTB grid and Bootstrap?  The demo showed using Bootstrap for hard-coded grid functionality such as a column control.  However, what if you have a full-width column in your template but authors want to put two half-width components within that?  To do that, they need to use Layouting mode to modify the components to be 6 columns wide within the parent full-width column, and for that I believe they need the AEM OOTB grid, correct?

L: Yes! To allow authors to control the column, then you need to use the OOTB AEM Grid and you LayoutGrid component to enable that feature instead of Parsys. Mostly, when we have the column control component created using other frameworks like Bootstrap, Authors can always use that component to control the layout than the OOTB layouting mode.

2) Is there any way to make AEM use the Bootstrap grid for author Layouting functionality, so we can avoid the import of both Bootstrap's and AEM's grid code to satisfy both the hard-coded and authored grid use cases?

L: No! Layouting functionality is built based on AEM Grid system

3) Regarding using Angular to render a component, we found that when an author adds/edits a component on the page the Angular JS code will not execute on that new HTML because Angular has already run on initial page load and adding/editing a component does not trigger angular to run again.  A heavy-handed approach to this is to add an editConfig to all angular components that refreshes the page on all adds/edits, but this feels like solving the problem with a sledge hammer.  Another approach (which I have done) is to instrument (a.k.a. hack) the AEM authoring JS code to trigger an Angular digest cycle on add/edit of a component on the page.  This worked great, but required a lot of digging into the specifics of the authoring UI and monkey patching in a solution.  So my question is, is there a standard way of handling Angular JS components so they re-render on add/edit to the page w/o a full page refresh?

L:As far as I know, I dont think we have any other option as of now! Mostly, will load AngularJS in the preview mode if you are using SPA

bsloki
Community Advisor
Community Advisor

1) Do you recommend mixing both the AEM OOTB grid and Bootstrap?  The demo showed using Bootstrap for hard-coded grid functionality such as a column control.  However, what if you have a full-width column in your template but authors want to put two half-width components within that?  To do that, they need to use Layouting mode to modify the components to be 6 columns wide within the parent full-width column, and for that I believe they need the AEM OOTB grid, correct?

L: Yes! To allow authors to control the column, then you need to use the OOTB AEM Grid and you LayoutGrid component to enable that feature instead of Parsys. Mostly, when we have the column control component created using other frameworks like Bootstrap, Authors can always use that component to control the layout than the OOTB layouting mode.

2) Is there any way to make AEM use the Bootstrap grid for author Layouting functionality, so we can avoid the import of both Bootstrap's and AEM's grid code to satisfy both the hard-coded and authored grid use cases?

L: No! Layouting functionality is built based on AEM Grid system

3) Regarding using Angular to render a component, we found that when an author adds/edits a component on the page the Angular JS code will not execute on that new HTML because Angular has already run on initial page load and adding/editing a component does not trigger angular to run again.  A heavy-handed approach to this is to add an editConfig to all angular components that refreshes the page on all adds/edits, but this feels like solving the problem with a sledge hammer.  Another approach (which I have done) is to instrument (a.k.a. hack) the AEM authoring JS code to trigger an Angular digest cycle on add/edit of a component on the page.  This worked great, but required a lot of digging into the specifics of the authoring UI and monkey patching in a solution.  So my question is, is there a standard way of handling Angular JS components so they re-render on add/edit to the page w/o a full page refresh?

L:As far as I know, I dont think we have any other option as of now! Mostly, will load AngularJS in the preview mode if you are using SPA

kautuk_sahni
Community Manager
Community Manager

daniel_henrique wrote...

Hi.

Is there a recording of this session? Will it be added to https://helpx.adobe.com/experience-manager/topics/ate-sessions.html?

Regards,

Daniel.

 

Yes, the recording would be added within 2-3 days.

~kautuk

BigT168
Level 5
Level 5

This session is very good and useful. Just wonder if you will add it into adobe on-demanding recording and when ? Or anyplace we can review the session again.

 

Thanks.

kautuk_sahni
Community Manager
Community Manager

BigT168 wrote...

This session is very good and useful. Just wonder if you will add it into adobe on-demanding recording and when ? Or anyplace we can review the session again.

 

Thanks.

 

Yes, the recording could be found at :- https://helpx.adobe.com/experience-manager/topics/ate-sessions.html

We will update it in 2-3 days.

I will keep you posted.

~kautuk