ÃÛ¶¹ÊÓƵ

Asset Share Commons Asset Kit

Learn how to use Asset Share Common’s to generate bespoke, shareable web pages that list assets from AEM Assets folders or collections.

video poster

Transcript
So I’m going to quickly show you the asset kit functionality from Asset Share Commons. The idea behind the asset kit was to create an easy way for authors to collect assets, either in asset folders or asset collections, and then automatically generate a web page for those assets that they could then share out to the world or whoever needs to access them outside their organization. So I’m not going to go into all the details, but I’m going to give you kind of a high-level setup. I’m here on my Amazon Cloud Service instance. I have the latest Asset Share Commons installed. You need at least 252 to do all this, so just be aware of that. But the first thing we’re going to do is we’re going to set up a workflow. So we’re going to go to Tools, Workflow Models, and we’re going to create a brand-new workflow model that we will use to generate our asset kit pages. And I’ll just call it Create Asset Kit. Of course, you can name this anything you want, and you can actually have multiples of these if you wanted to create different variations of asset kits. But for this, of course, we’ll just do one. We’ll edit it. And first thing I’m going to do is delete this auto-added step. And then I’m going to go over here, and I’m going to search for my asset kit step. So there are two steps available. The first is asset kit creation. And if we edit this, this first tab, you can mostly ignore. You’ll want to keep Advanced Handler on. But the second tab is where all the information is. So the first thing we need to do is define where we want our asset kits created under AM Sites. It defaults to content asset kits, but you can select anywhere you want under Content. Let’s just go ahead. Set that. Asset kits. Oops, kits. The next thing we need to do is specify the AM Editable Page template we’ll be using to create the asset kit pages. So for this, we can browse. Normally, you would create your own template because you’d be configuring that especially for your own use cases. But we do have a sample one under Templates or at asset share comments templates, and we have asset kit template here. So I’ll select that. We have a checkbox that allows us to tell the asset kit workflow to either generate new asset kit pages if the same folder or collection is being reprocessed. I like to keep a one-to-one between the asset kits either the folders or the collections and my pages, so I’ll leave this checked. Next is a dropdown, and this is a list of pluggable page path generators. So what this is going to do is generate the path for the asset kit page that exists or that will be appended to this root path. So basically, all our asset kit pages will be under content asset kits as specified up here in root path. And then we’ll be sharding it out by the current day’s year, current day’s month, and then a generated UUID. You can implement your own page path generators if you have your own custom logic that you want to use to create your paths. Next up are the component updaters. And the component updaters, again, are a pluggable framework, so you just have to implement an OSGI interface. This is all documented. But what these do is they will process the page that’s been created by this template and then update various aspects of it based on the payload or the asset kit folder collection that is being put under workflow. So out of the box, there’s three. We have the page metadata, so this will update the page’s title and description based on the folder’s title and description or the collection’s title and description. We also have a banner component. So this is essentially we’ll populate a image component with a specified image. In this case, this one is developed to look for an image with the title banner and then use that as the banner image for the asset kit page. And lastly, here is the asset kit component. And this is the component that’s going to actually render the list of the assets in the asset kit. And so AssetJourkomis provides one. You’ll probably at least want to override this with your own components, HDL, so you can adjust the display of the asset kit page to your brand standards. So anyhow, we’ll see this in a second. So let’s go ahead and save these changes. And the next thing that we can do is optionally add this asset kit replicator, replication workflow step. And what this is going to do is this is going to automatically replicate the asset kit page and any reference assets or templates or policies or anything like that. So this removes the need for authors that are creating or composing the asset kit in the folders and collections from having to go to AM sites and actually activating those pages. Likewise, you can also pick deactivate if you want to set something up to pull asset kits down. And of course, this is just a workflow, so you could put some sort of review step between these or splits or whatever you need to do in terms of managing your asset kit creation workflow. So that’s all we need to do. Let’s hit Sync. We’ll head back to Assets. And currently, asset kits can be created from an AM assets folder or collection. I’m going to use a folder I already have on created here full of some assets that I want in my asset kit. So here’s all the assets that will show up, all the assets that are in this folder. One thing we need to do is select a banner image. So because I’m using the assets share commons banner component updater, it’s going to look for an asset in this folder with the title banner and use that as the banner image. So let’s go ahead and pick this one. So I’m just going to give it the title banner, save and close. And now this is designating this as the banner image. Like I mentioned before, that is a pluggable framework. So if you wanted to create your own scheme for figuring out which image is the banner image, regardless if it’s in this folder or not, you could of course implement your own component updater for that. OK, now that we have our assets ready for our asset kit page, let’s go ahead and process it. So what we need to do is put this asset folder under our workflow that we created. And likewise, if we had a collection, we would want to put that collection under the workflow that we created. I want to call out that one thing you can’t do, but you may be tempted to do is select the folder collection, go to create and select workflow, and then pick your create asset kit workflow. So if you do this, it’s going to put each asset in this folder under this workflow. And what we want to do is put this folder as the payload for the workflow. So we can’t actually start the workflow like this, unfortunately. What you could do is do some custom film network and add a button in the AM assets UI that you could then select this folder and press the button, and it would have the intelligence to do that. But since that’s not out of the box, let’s go ahead and head over back to tools, workflow, models. And select our create asset kit. Here we can select start workflow. Then we can pick the exact payload that we want to put under this workflow. So in this case, we want to select our my asset kit. So we can select that. And here is the payload path now to the folder. Do note that if you are using collections, you may have to do a little bit more custom work. Collections actually don’t show up in this select path tool. So you would have to get that path and then copy and paste it into this path field here. But let’s go ahead and run it on our asset folder. And it should be pretty quick. Let’s go back to sites now. We should have a new asset kit page created under our root path of content slash asset kits. And since we’re using the out of the box year month UUID page path generator, we have today’s year, today’s date, and we have a UUID for the page name. Because we use that page metadata content updater, it has copied the folder’s title, which was my asset kit, into the page’s title as well. So we can go ahead and check this out. We can open it. This is just like any other page in AEM. And sure enough, looks like our banner was updated to the banner image that we put into the folder. And we have all those images in our folder here. And of course, you can override the asset kit components HTML and change all the visuals here. So it displays any metadata you want and any sort of format that you want. And just to show that the replication worked, let’s go ahead and check out view as published. We’re going to, first of all, get rid of the WCM disabled, since that will probably break in my dispatcher, and switch to the publish instance. And as you can see, we have our asset kit page on our publisher because we automatically activated it using that second workflow step. So this is about it. But before we finish, I want to take just one quick look at the template for this. And this is important because this works with the component updaters that we configured in that asset kit creation workflow step. So if we go to the initial content, you can see that I have these two components here, image and asset kit. And these are simply placed in the initial content. They’re not actually configured. But these are the component instances on the new asset kit pages that the component updaters will update with the content based on the payload and the logic in the component updaters. Usually, if you have a component updater, you’ll have at least one component in the initial content that that component updater will update. So I think that is about it now. Take a look at the docs. Quite a bit of this is pluggable and extensible, just because we know that you’re going to want to adjust the asset kit appearance based on your own brand standards and based on your business requirements in terms of what needs to be displayed.

is only available on Asset Share Commons 2.5.4+

recommendation-more-help
a483189e-e5e6-49b5-a6dd-9c16d9dc0519