Expand my Community achievements bar.

SOLVED

How to use data-sly-test to tell the multifield (pathfield) is image or video?

Avatar

Level 4

Dear community,

 

I'm trying to build my own custom carousel which can add multipe assets with multifield (pathfield to indicate the rootPath). 

YuSheng_0-1650730503832.png

 

As the pic shows, I'd like to add both images and videos on my banner, and am now trying data-sly-test to make this happen.

 

YuSheng_1-1650730725271.png

 

Now I can only pick either image or video to add, and have tried some combinations at the end of data-sly-test (line 3 and line 8). Is this a possible way to work it out?

 

I suppose I can make this work by using jQuery contains (say, contains ".mp4") function after rendering then append the video elements afterwards, but still would like to know if I can simply use data-sly-test before get into script.

 

Any ideas would be appreciated!

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

I have tried with below htl code and checking file type  -

 

<div data-sly-test="${'jpg' in department.image}">IMAGE</div>
<div data-sly-test="${'pdf' in department.image}">PDF</div>

Entire htl code -

<sly data-sly-use.companiesModel="com.aem.demo.core.models.CompaniesModel"/>
<sly data-sly-test.empty="${!companiesModel.companies}" />
<div data-sly-test="${wcmmode.edit && empty}" class="cq-placeholder" data-emptytext="${component.title}"></div>
<sly data-sly-test="${!empty}">
  <div>
      <ul data-sly-list.company="${companiesModel.companies}">
        <li>${company.name}
          <ul data-sly-list.department="${company.departments}">
            <li>
               ${department.image}
                <li data-sly-test.image="${department.image}">

                  <div data-sly-test="${'jpg' in department.image}">IMAGE</div>
                  <div data-sly-test="${'pdf' in department.image}">PDF</div>
                </li>  
            </li>
          </ul>
        </li>
      </ul>
  </div>
</sly>

Output is file path and it's type-

DEBAL_DAS_0-1650797241524.png

Author's entries -

DEBAL_DAS_1-1650797351766.pngDEBAL_DAS_2-1650797361223.pngDEBAL_DAS_3-1650797369827.pngDEBAL_DAS_4-1650797379084.png

 

I have just used Image as field name in my sample component. But I can upload any type of files.

 

Sling model -

package com.aem.demo.core.models;

import java.util.List;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

@Model(
adaptables = {Resource.class},
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface CompaniesModel {
@inject
List<Company> getCompanies(); // the name `getCompanies` corresponds to the multifield name="./companies"
/**
* Company model
* has a name and a list of departments
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Company {
@inject
String getName();
@inject
List<Department> getDepartments(); // the name `getDepartments` corresponds to the multifield name="./departments"
}
/**
* Department model
* has a name and a manager
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Department {
@inject
String getImage();

}

}

 

cq:dialog -

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Companies"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<companies
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new company.">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./companies">
<items jcr:primaryType="nt:unstructured">
<name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Comp. Name"
name="name"/>
<departments
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new department."
fieldLabel="Departments">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./departments">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Image"
name="image"
rootPath="/content/dam/we-retail/en/people"/>
</items>
</field>
</departments>
</items>
</field>
</companies>
</items>
</column>
</items>
</content>
</jcr:root>

 

 

 

 

 

 

 

 

View solution in original post

4 Replies

Avatar

Community Advisor

Hi @YuSheng ,

 

Identifying asset type can be done through sling model. For example like below.

 

       @ValueMapValue
	private String assetPath;

	@SlingObject
	ResourceResolver resourceResolver;

	private Resource resource;
	private Asset asset;

	@PostConstruct
	protected void init() {
		resource = resourceResolver.getResource(assetPath);
		if(resource != null) {
			asset = resource.adaptTo(Asset.class);
		}
	}

	public String getAssetType() {	
		if(asset != null) {
			if(DamUtil.isImage(asset)) {
				return "image";
			} else if (DamUtil.isVideo(asset)){
				return "video";
			}
		}
		return StringUtils.EMPTY;
	}

 

 

Avatar

Level 4

Hi Kishore_Kumar_

 

Thank you for the reply.

Although I don't intend to get into sling model in this case, shall take your reply as reference when I need to identify asset type in sling model next time.

 

Cheers!

Avatar

Correct answer by
Employee Advisor

I have tried with below htl code and checking file type  -

 

<div data-sly-test="${'jpg' in department.image}">IMAGE</div>
<div data-sly-test="${'pdf' in department.image}">PDF</div>

Entire htl code -

<sly data-sly-use.companiesModel="com.aem.demo.core.models.CompaniesModel"/>
<sly data-sly-test.empty="${!companiesModel.companies}" />
<div data-sly-test="${wcmmode.edit && empty}" class="cq-placeholder" data-emptytext="${component.title}"></div>
<sly data-sly-test="${!empty}">
  <div>
      <ul data-sly-list.company="${companiesModel.companies}">
        <li>${company.name}
          <ul data-sly-list.department="${company.departments}">
            <li>
               ${department.image}
                <li data-sly-test.image="${department.image}">

                  <div data-sly-test="${'jpg' in department.image}">IMAGE</div>
                  <div data-sly-test="${'pdf' in department.image}">PDF</div>
                </li>  
            </li>
          </ul>
        </li>
      </ul>
  </div>
</sly>

Output is file path and it's type-

DEBAL_DAS_0-1650797241524.png

Author's entries -

DEBAL_DAS_1-1650797351766.pngDEBAL_DAS_2-1650797361223.pngDEBAL_DAS_3-1650797369827.pngDEBAL_DAS_4-1650797379084.png

 

I have just used Image as field name in my sample component. But I can upload any type of files.

 

Sling model -

package com.aem.demo.core.models;

import java.util.List;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

@Model(
adaptables = {Resource.class},
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public interface CompaniesModel {
@inject
List<Company> getCompanies(); // the name `getCompanies` corresponds to the multifield name="./companies"
/**
* Company model
* has a name and a list of departments
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Company {
@inject
String getName();
@inject
List<Department> getDepartments(); // the name `getDepartments` corresponds to the multifield name="./departments"
}
/**
* Department model
* has a name and a manager
*/
@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
interface Department {
@inject
String getImage();

}

}

 

cq:dialog -

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Companies"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<companies
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new company.">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./companies">
<items jcr:primaryType="nt:unstructured">
<name
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Comp. Name"
name="name"/>
<departments
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
composite="{Boolean}true"
fieldDescription="Click 'Add Field' to add a new department."
fieldLabel="Departments">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./departments">
<items jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
fieldLabel="Image"
name="image"
rootPath="/content/dam/we-retail/en/people"/>
</items>
</field>
</departments>
</items>
</field>
</companies>
</items>
</column>
</items>
</content>
</jcr:root>

 

 

 

 

 

 

 

 

Avatar

Level 4

Hi DEBAL_DAS,

 

It works perfectly now by adopting your approach, thanks a lot!