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.

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

Avatar

Administrator
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



Kautuk Sahni
12 Replies

Avatar

Administrator

Looking forward to a fulfilling and enriching experience! :)



Sukrity Wadhwa

Avatar

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?

Avatar

Administrator

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

~kautuk



Kautuk Sahni

Avatar

Level 2

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

Avatar

Administrator

I Have again pinged Lokesh regarding this.

~kautuk



Kautuk Sahni

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

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

Avatar

Administrator

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



Kautuk Sahni

Avatar

Level 6

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.

Avatar

Administrator

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



Kautuk Sahni