Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Styleguides / Pattern library / Component documentation

Avatar

Level 1

Has anyone had any experience of setting up a styleguide / pattern library / component documentation which is used alongside an implementation of AEM?

It would be capable of consuming the AEM components whilst providing documentation and support materials for developers and authors. Something like this http://www.philips.co.uk/componentlibrary/home.html. This could be done as a PDF or other document but these will often fall out or sync and are not updated.

Any ideas?

1 Accepted Solution

Avatar

Correct answer by
Level 1

Hi,

Didn't get very far with it. I don't think there is much out of the box that can help with this. I think it will be building something custom that pulls out any components and implements some of the AEM apis to gather information about usage.

View solution in original post

7 Replies

Avatar

Level 10

Most AEM components now should be done via HTL. I would start with the HTL spec: 

https://github.com/Adobe-Marketing-Cloud/htl-spec

Here is the HTL docs: 

https://docs.adobe.com/docs/en/htl/overview.html?wcmmode=disabled

The docs provide overview information that you would find in typical pattern docs. 

We have a lot of end to end example articels on building components with HTL. For example - to learn how to build a HTL component that contains a Java backend that uses WCMUsePojo -see:

https://helpx.adobe.com/experience-manager/using/first_htl_WCMUsePojo.html

From that article - there are links to a lot of other material including 2 ATCE sessions

Now if other communtyu members wrote some blogs/docs on component dev - please post here too. 

Hope this helps... 

Avatar

Level 1

Thanks for those, I don't think they're quite what I'm looking for.

By a pattern library / styleguide I mean something like these:

Something that can be used as a reference resource for authors or developers which lists out available components, shows examples of their usage and notes about how they are authored. It would be ideal if it used the actual components of the production website so any changes are always in sync.

Thanks

Avatar

Level 10

In AEM, there is documentation about Components and development in the docs: 

https://docs.adobe.com/docs/en/aem/6-2/develop/components.html

We have many articles that show you step by step how to code specific example components.  

You will find a lot of end to end articles here on AEM component development -- 

https://helpx.adobe.com/experience-manager/topics/how-to.html

Avatar

Level 10

In addition to the doc topics and component articles - there is also plenty of reference material too: 

https://docs.adobe.com/docs/en/aem/6-2/develop/ref.html

Avatar

Level 2

Hi Jonathanb - did you get anywhere with this?

I'm looking at the same issue.

Trying to create a kind of 'playbook' for components that someone in UX (or anyone I guess) that'll be considering the creation of a page might use as a reference to help make decisions.  Very much a reference tool.

At the moment we're considering recreating the components in within a design package: this (as you can imagine) has both up and downsides.

Avatar

Correct answer by
Level 1

Hi,

Didn't get very far with it. I don't think there is much out of the box that can help with this. I think it will be building something custom that pulls out any components and implements some of the AEM apis to gather information about usage.

Avatar

Level 10

Correct - such functionality would need to be built and not offered ootb.