Asset Share Commons Asset Kit
Learn how to use Asset Share Common鈥檚 to generate bespoke, shareable web pages that list assets from AEM Assets folders or collections.
Transcript
So I鈥檓 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鈥檓 not going to go into all the details, but I鈥檓 going to give you kind of a high-level setup. I鈥檓 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鈥檙e going to do is we鈥檙e going to set up a workflow. So we鈥檙e going to go to Tools, Workflow Models, and we鈥檙e going to create a brand-new workflow model that we will use to generate our asset kit pages. And I鈥檒l 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鈥檒l just do one. We鈥檒l edit it. And first thing I鈥檓 going to do is delete this auto-added step. And then I鈥檓 going to go over here, and I鈥檓 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鈥檒l 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鈥檚 just go ahead. Set that. Asset kits. Oops, kits. The next thing we need to do is specify the AM Editable Page template we鈥檒l be using to create the asset kit pages. So for this, we can browse. Normally, you would create your own template because you鈥檇 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鈥檒l 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鈥檒l 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鈥檒l be sharding it out by the current day鈥檚 year, current day鈥檚 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鈥檚 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鈥檚 three. We have the page metadata, so this will update the page鈥檚 title and description based on the folder鈥檚 title and description or the collection鈥檚 title and description. We also have a banner component. So this is essentially we鈥檒l 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鈥檚 going to actually render the list of the assets in the asset kit. And so AssetJourkomis provides one. You鈥檒l 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鈥檒l see this in a second. So let鈥檚 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鈥檚 all we need to do. Let鈥檚 hit Sync. We鈥檒l head back to Assets. And currently, asset kits can be created from an AM assets folder or collection. I鈥檓 going to use a folder I already have on created here full of some assets that I want in my asset kit. So here鈥檚 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鈥檓 using the assets share commons banner component updater, it鈥檚 going to look for an asset in this folder with the title banner and use that as the banner image. So let鈥檚 go ahead and pick this one. So I鈥檓 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鈥檚 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鈥檚 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鈥檛 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鈥檚 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鈥檛 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鈥檚 not out of the box, let鈥檚 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鈥檛 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鈥檚 go ahead and run it on our asset folder. And it should be pretty quick. Let鈥檚 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鈥檙e using the out of the box year month UUID page path generator, we have today鈥檚 year, today鈥檚 date, and we have a UUID for the page name. Because we use that page metadata content updater, it has copied the folder鈥檚 title, which was my asset kit, into the page鈥檚 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鈥檚 go ahead and check out view as published. We鈥檙e 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鈥檙e 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鈥檒l 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鈥檙e 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