Skip to main content
Tag

designs

AEM Experiment – Site Importer

By Adobe CQ, Adobe Experience Manager, AEM

So today I wanted to try something new and I had been meaning to try out the built in site importer on AEM 5.6 and 6.0.  It seemed like a very robust and intuitive way to take an existing site and turn it into an AEM set of templates / pages but I saw a potential other workflow for it.  Even though I’ve been doing AEM (CQ) dev for a bit now  I always seek to create new efficiencies in my development workflows.

My idea was to frame up a layout the way I wanted it in basic HTML/CSS and then use the site importer to implement that layout with minimal development effort on the AEM side.  I quickly coded something up , uploaded to my server, and eagerly pressed the import button on my site path.  To my surprise it all worked swimmingly, the site itself was imported with no problem.  I had no content to import since my overall goal was a framework so my next step was to extract components based on my prototyped layout.  I eagerly hit the components button.  Once you hit the “select” button at the top left it functions kind of like a DOM inspector where it highlights your different page elements.  Sometimes you aren’t able to select an element you are targeting because this part only uses the top level sections.  Luckily on the right hand side they have provided a listing of the DOM so you can select whatever element you want (based off of the selected parent element) .

Screen Shot 2015-04-28 at 2.24.10 PM

Now that you have the element you want selected you have two methods you can take:

You can hit the “extract” button at the top left which will extract that area as a bare bones component, you can also tell it what component to use as a base OR you can map it to an existing component (my preferred method)  basically you drag the component from the left hand side (sorry I didn’t mention that, there is a component listing on the left hand side much like the “sidekick”)  This will cause a mapping to generate in the bottom area of your screen.  You must set the path for your jcr:content to live so double click that path area and create that —initially I had an issue with this step as I couldn’t form a path that it would accept, it kept on throwing errors, I found that randomly typing a bunch of letters let me create the mapping and I was able to change the name of it afterwards when I found where the actual node was located After you click generate the page itself doesn’t refresh and that mapping does not clear from the bottom but if you didn’t get an error you are good to go.

After all was said and done I had an AEM page with the layout that I wanted and all of my planned components with very little coding effort on my side.  The nice thing that the importer also does is it creates a blueprint for you to create other projects/sites off of.  The importer also creates an area for your clientlibs , and your images.  Overall I find that this was a very efficient way of getting a page structure set up and I think a smart way to save dev time when creating new pages and templates!  Im interested in hearing anyone elses successes or failures using this approach.

– Joe DeVito

 

Source: http://docs.adobe.com/docs/en/aem/6-0/develop/dev-tools/site-importer.html  (this provides a great walkthrough from start to finish, including importing your content as well)