Trying to extend AssetModel

[DigiLiviu]

Hi,

I've been trying to extend the AssetModel using the recommended Delegation pattern and I'm not sure I'm doing it right. Every example is using the ResourceSuperType method but there is no resource type in this case for me to extend from. I'm getting a null object when I try.

I have also tried without it and just using the @DeleGate and @self annotations and that does work in the sense that it generates a AssetModelImpl object but I'm using the Jackson json exporter to generate JSON representations of my models and it's leading to "Infinite recursion (StackOverflowError)". When I debug it, it does seem like my init method the one from AssetModelImpl, as well its getResource() method are looping indefinitely so I'm wondering if what's happening is that the delegate isn't linked properly and the two assets are one and the same so it's basically a class holding itself?

Maybe that doesn't really make sense but any guidance on how to properly extend the AssetModel(Impl) would be greatly appreciated.

Thanks,

Liviu

[davidjgonzalez]

Hi, can you give some context of what you're trying to do? AssetModel is rarely adapted from request itself - rather via a model factory fromWrappedRequest.

To be honest, I would probably create a pojo wrapper that you just pass the assetModel to. I'm not clear where you'd want to use your wrapping delegate

[DigiLiviu]

Hi David, really appreciate your response. We are trying to create a "Related Assets" component that would sit on the Asset Details page and query the repository for similar assets (based on tags) and display the 3 most relevant ones.

This component would therefore make the query and receive a list of related assets but as resources. We then need to adapt them to AssetModels and, since we need a few additional pieces that the OOTB AssetModel does not provide, wanted to make our own CustomAssetModel which would extend the OOTB one. We figured that the delegation pattern was best.

The query is to be performed by invoking a servlet and it returns a json response therefore, the CustomAssetModel is using the Jackson JSON Exporter to convert itself to a JSON object after its been adapted from a resource.

I did discover what the issue was in the end. It was the getAsset() method. That one invokes a recursive method that creates a child -> parent relationship. My Jackson error looked like this:

com.fasterxml.jackson.databind.JsonMappingException: Infinite recursion (StackOverflowError) (through reference chain: org.apache.sling.jcr.resource.internal.helper.jcr.JcrNodeResource["parent"]->org.apache.sling.jcr.resource.internal.helper.jcr.JcrNodeResource["children"]->org.apache.sling.jcr.resource.internal.helper.jcr.JcrNodeResource["parent"]

I was able to fix it by creating a getAsset() method in my CustomAssetModel like

public Asset getAsset() {
  return delegate.getAsset();
}

And adding an @JsonIgnore annotation above it so it gets skipped by the JSON exporter.

Thanks,

Liviu

[davidjgonzalez]

Ah cool!

Typically we get the AssetModel using ModelFactory ... like so:

@Self
SlingHttpServletRequest request;

@OsgiService 
ModelFactory modelFactory;

...




AssetModel assetModel;

@PostConstruct 
protected void init() { 
   Resource resource = request.getResourceResolver().getResource(path);

   assetModel = 
modelFactory.getModelFromWrappedRequest(request, resource, AssetModel.class)
}

@Override
public getTitle() { 
  // Delegate
  return assetModel.getTitle(); 
}
...

You can then use the assetModel as the delegate.

[DigiLiviu]

Interesting... This worked for me.

@Delegate
@Self
private AssetModel delegate;

Is there any reason to change?

Also, how we go about doing it if we don't have a request object? As mentioned, we're trying to create a related assets component that sits on the details page and displays other assets with similar tags as the current one. We're invoking a servlet from the details page via an ajax request that receives (as a req param) the current asset path. From there, it converts it to an AssetModel, gets its tags and uses them to query the repo for related assets. That returns a List of resources. How can we properly convert them to AssetModels? I know that resources can be adapted to AssetModels but it seems as though some attributes will be missing. One important one will be the Config object which, from what I can see, will be needed to properly create a url to link to this asset.

So we do end up with a list of AssetModels but we can't properly link to their detail pages after all that.

Thanks,

Liviu

[davidjgonzalez]

@DigiLiviu So AssetModel can be adapted from a request or a resource.

I always try to use a request as the adaptable when i can, because it provides some extra context -- some computed properties (for example [1]) can the request to provide more context. This is actually really rare, but when i can i do just cuz more is more :)

So, youre fine doing what youre doing - and if your @self is an request, then its great.

if you dont have a request, then you can definitely do resource.adaptTo(AssetModel.class). That said, it sounds like, since youre in the context of a servlet, that you do have a request - so you could at the very least use the modelFactory pattern to turn the resources into AssetModels with the current request's context.

I am curious as to why you need to make this AJAX call back to a servlet -- why cant you just make a new Sling Model for your details component, that performs this query and then have an HTL that outputs the related assets? An example is of one of these is:

https://github.com/adobe/asset-share-commons/blob/develop/core/src/main/java/com/adobe/aem/commons/assetshare/components/details/impl/TagsImpl.java

You could have a RelatedAssetsImpl.java Sling Model that looks something like:

@Model(
        adaptables = {SlingHttpServletRequest.class},
        adapters = {RelatedAssets.class, ComponentExporter.class},
        resourceType = {RelatedAssetsImpl.RESOURCE_TYPE},
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
@Exporter(name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION)
public class RelatedAssetsImpl extends AbstractEmptyTextComponent implements RelatedAssets {
    private static final Logger log = LoggerFactory.getLogger(RelatedAssetsImpl.class);

    protected static final String RESOURCE_TYPE = "my-project/components/details/related-assets";

    @Self
    @Required
    private SlingHttpServletRequest request;

     @Self 
     private Config config;

    @Self
    @Required
    private AssetModel asset;

    @OsgiService
    private ModelFactory modelFactory;


    @OsgiService
    private AssetDetailsResolver assetDetailsResolver;


    private List<CustomAssetModel> relatedAssets;

    @Override
    public List<relatedAssets> getRelatedAssets() {
        if (relatedAssets == null) {
            relatedAssets = new ArrayList<>();

            // Implement getRelated to lookup related assets;
            List<Resource> resources = getRelated(asset.getResource());
            resources.stream().map(r -> { 
                // You might be able to do this directly to your CustomAssetModel.class
                AssetModel assetModel = modelFactory.getModelFromWrappedRequest(request, r, AssetModel.class);
                // Or however you get your CustomAssetModel
                CustomAssetModel customAssetModel = new CustomAssetModel(assetModel);
                 customAssetModel.setDetailsUrl(assetDetailsResolver.resolve(config, assetModel);
                relatedAssets.add(CustomAssetModel);
            });

        }
        // return a copy for security reasons
        return new ArrayList<>(relatedAssets);
    }

    @Override
    public boolean isEmpty() {
        return getRelatedAssets() == null || getRelatedAssets().size() == 0;
    }

    @Override
    public boolean isReady() {
        return !isEmpty() || hasEmptyText();
    }

    @Nonnull
    @Override
    public String getExportedType() {
        return RESOURCE_TYPE;
    }
}

Or ... you could do something similar in custom computed property like [2] .. and then you can access related assets off any ASC AssetModel via ... assetModel.getProperties().get("relatedAssets", AssetModel[]{}); (or whatever "NAME" you give your custom computed property that returns the list of related assets).

Let me know if you want to dig further into either of these approaches, or if there's a good reason to split your component up into a renderer and a servlet that returns the related assets that are AJAX'd in. I can't imagine that looking up related assets would be too slow, since if i recall, the related assets are saved by path - so its very quick to find/get them).

[1] https://github.com/adobe/asset-share-commons/blob/develop/core/src/main/java/com/adobe/aem/commons/assetshare/content/properties/impl/FileSizeImpl.java#L80

[2] https://github.com/adobe/asset-share-commons/blob/develop/core/src/main/java/com/adobe/aem/commons/assetshare/content/properties/impl/FileSizeImpl.java

[davidjgonzalez]

The more i think about it - the more i like using a Computed Property that does something like the above.

[DigiLiviu]

Thanks so much for all the thought you've put into this @davidjgonzalez. The first approach would simplify things considerably, of course, but what does that do to our caching? This is all server side so if want to be able to cache these pages, then we need a complex invalidation strategy to clear the cache of any detail page whenever the details of an asset that may appear on its related assets section changes. Also, the simple fact that we have to clear the cache more frequently will lead to a dip (maybe small) in performance.

With the server side approach, we can load the bulk of the page from scratch, get our first paint out quickly (which google loves) and populate the related assets after the fact.

Is there a way to opt for the server side approach while avoiding those issues? Or are they not really as big as I am making them out to be?

[davidjgonzalez]

So it sounds like this is an anonymous, publicly accessible asset share? (No login, and google should be indexing it's pages?)

Assuming these are publicly accessible/cacheable ...
If you're not using a CDN - you could use sling dynamic include (SDI) to no cache include just that component.

If you are using a CDN, then you'd have to do something like ajaxing it in. You could do a dedicated servlet or you could even have the default component HTL script just have an uncachable Ajax call that calls back to itself with a selector that render the assets. (This is how the old Acs commons AJAX component worked)

Honestly you'd probably just want to flush all details pages everytime you activate an asset (this requires something like acs commons dispatcher flush rules). I can't imagine you're activating/deactivating assets that frequently? If it's problem, you could always switch the component to ajax itself in later pretty easily.

[DigiLiviu]

It is indeed an anonymous publicly accessible asset share. It's also running through AEMaaCS, so there is the standard CDN and the ACS commons dispatcher flush won't work with it.

The ajax approach therefore seems like the way to go, and that's what I was going for. I created a servlet that could receive the ajax request from the Related Assets component with some parameters that would include the tags of the current asset (which were set as data attributes via HTL). The servlet would then query the repo and return a json representation of the related assets it discovered. That's where the issue arose from - the ajax request I was making to the servlet didn't have the parameters it needed to create the Config object. I tried adapting the request object that the servlet received to a Config object and it was null. I guess that's because the request wasn't to a page but to the asset (based on how I configured my servlet to listen). I guess I could change that to be the resource type of the page.

From what I gather from what you're saying though, we could perform an ajax request differently? I didn't quite catch what you meant there though, is there a way to issue an ajax request to the Related Assets component and have it render itself via HTL server side?

[davidjgonzalez]

Yes, you could try something like this, a component with 2 HTL scripts. The Default script (related-assets.html) just orchestrates an XHR/AJAX call to itself but w/ a non-default selector (in this case, i made up xhr) which is shown in the 2nd code snippet below:

/apps/my-app/components/related-assets/related-assets.html

<sly data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html" 
      data-sly-use.modelCache="com.adobe.aem.commons.assetshare.util.ModelCache"
     data-sly-set.asset="${modelCache['com.adobe.aem.commons.assetshare.content.AssetModel']}"
     data-sly-test.ready="${field.ready}"> 

<script>
// Youd want to delcare this centrally somewhere so you arent redefining this function if your component is used multiple times on a page
async function xhrContent(el) {
  // Maybe set nocache  value to nearest 5 mins or something, so Fastly can cache most of the requests, but when it hits Dispatcher it will go through to AEM

  // This will make and XHR GET to: /content/my-asset-share/details/image/_jcr_content/root/blah/blah/related-assets.xhr.html/content/dam/test.png?nocache=1234

  const response = await fetch(`${el.dataSet.path}.xhr.html/${el.dataSet.asset}?nocache=${new Date().getTime())}`);
  el.innerHTML = await response.text();
}
</script>

<div data-path="${resource.path}"
        data-asset="${asset.path}"
        onload="xhrContent(this)"><!-- Replaced with XHR content --></div>

</sly>
<sly data-sly-call="${placeholderTemplate.placeholder @ isEmpty=!ready}"></sly>

/apps/my-app/components/related-assets/xhr.html

<sly
     data-sly-use.modelCache="com.adobe.aem.commons.assetshare.util.ModelCache"
     data-sly-set.asset="${modelCache['com.adobe.aem.commons.assetshare.content.AssetModel']}"
     data-sly-use.field="com.adobe.aem.commons.assetshare.components.details.RelatedAssets"
     data-sly-test.ready="${field.ready}">

     // Render HTML for related assets provided by either the custom "field" (RelatedAssets) SlingModel
    <ul data-sly-list.asset=${field.relatedAssets}> 
       <li>${asset.title}</li>
    </ul>

    // Or via a custom Computed Property named "related-assets"
    <ul data-sly-list.asset=${asset.properties['related-assets']}> 
       <li>${asset.title}</li>
    </ul>
</sly>

You may need to doublecheck your Dispatcher allow rules, and make sure the XHR can get through (since it will have a slightly different pattern that whats currently allowed). The nice thing about this pattern tho is:

1. You can implement "all" your component using the common paradigms of Sling Models, HTML, Dialogs
2. Your component's behavior is attached to the same resource (the component resource on the page).
3. Your component's XHR rendition has easy access to the authored properties ON the resource (so if you wanted to allow labels or what not to be authored, you can access them via ${properties.label} in the xhr HTML script.
4. Also, your component has context of being on a Page, and can look up things like Config, permissions, or language content (or anything that inherited down the tree).

Generally, i try to avoid path-based servlets because they lose all this context, and become these pieces of the site out sight/out of mind.

You can of course pull that my example JS function out into a clientlib or whatever, or bind to your element via anything you want (not just onload). I was just inlining everything to help illustrate. Also, i just wrote that code in the comment, so im sure there are syntax problems :P .. but hopefully that gives you the gist.

[DigiLiviu]

Hi @davidjgonzalez,

Thanks so much for clarifying that approach! Set it aside for a bit but was finally able to get back to it. It makes total sense and I was able to apply it.

Really appreciate your time here.

Thanks,

Liviu