Annotate Channel or Component Configuration Parameters with UI Directives

Dear community,

I hope you are well.

Currently Im follow up the below documentation
ref:

Please find below my implementation:

##################################

cnd:

[bloomreach:mycomponent] > bloomreach:basedocument, hippostd:relaxed, hippotranslation:translated
orderable

##################################

catalog.yaml
definitions:
config:
/hst:hst/hst:configurations/bloomreach/hst:catalog:
jcr:primaryType: hst:catalog
/bloomreach-catalog:
jcr:primaryType: hst:containeritempackage
/mycomponent:
jcr:primaryType: hst:containeritemcomponent
hst:componentclassname: org.example.bloomreach.components.page.MyComponentPage

      hst:iconpath: img/catalog/plugin/textandtitle/textandpicture-icon.png
      hst:label: My Component
      hst:template: components.mycomponent

##################################

MyComponent.java
@Node(jcrType = MyComponent.JCR_TYPE)
public class MyComponent extends BaseDocument {

//private static final Logger LOG = LoggerFactory.getLogger(TextWithTitle.class);

public static final String JCR_TYPE = “bloomreach:mycomponent”;

private static final String STREET = "bloomreach:street";
private static final String CITY = "bloomreach:city";
private static final String SIZE = "bloomreach:size";


public static String getJcrType() {
    return JCR_TYPE;
}

  public String getStreet() {
    return getSingleProperty(STREET, StringUtils.EMPTY);
}
public String getCity() { return getSingleProperty(CITY, StringUtils.EMPTY);}
public String getSize() { return getSingleProperty(SIZE, StringUtils.EMPTY);
}

}

##################################
MyComponentPage.java

@ParametersInfo(type = MyComponentParamsInfo.class)
public class MyComponentPage extends BaseHstComponent {
private static final Logger LOG = LoggerFactory.getLogger(MyComponent.class);

 private static final String ATTR_MYCOMPONENT_DOCUMENT = "mycomponent";

@Override
public void doBeforeRender(HstRequest request, HstResponse response) throws HstComponentException {
    final MyComponentParamsInfo info = getComponentParametersInfo(request);
    final HippoBean siteContentBaseBean = request.getRequestContext().getSiteContentBaseBean();

    final HippoBean scope = request.getRequestContext().getSiteContentBaseBean().getBean(ATTR_MYCOMPONENT_DOCUMENT);

    try {
        final HstQuery hstQuery = HstQueryBuilder.create(scope).ofTypes(MyComponent.class).build();


        final HstQueryResult result = hstQuery.execute();
        request.setAttribute(ATTR_MYCOMPONENT_DOCUMENT, result.getHippoBeans());
    }catch (QueryException queryException) {
        LOG.warn("Exception occurred during creation or execution of HstQuery.", queryException);
    }

}

}

##################################

MyComponentParamsInfo.java

@FieldGroupList({
@FieldGroup(titleKey = “address”, value = { “street”, “city” }),
@FieldGroup(titleKey = “layout”, value = { “size” })
})
public interface MyComponentParamsInfo {
@Parameter( name = “street”,
displayName = “Street”,
required = true)
String getStreet();

@Parameter( name = "city",
            displayName = "City",
            required = false)
String getCity();

@Parameter(name = "size", defaultValue="medium")
@DropDownList({"small", "medium", "large"})
String getSize();

}

##################################

mycomponent.ftl

<#-- @ftlvariable name=“mycomponent” type=“org.example.bloomreach.beans.MyComponent” →
<#if mycomponent?has_content>

${mycomponent.street}

${mycomponent.city}

${mycomponent.size}

<#elseif isPreview>

No info has been select yet!

##################################

template

definitions:
config:
/hst:hst/hst:configurations/bloomreach/hst:templates:
/components.mycomponent:
jcr:primaryType: hst:template
hst:renderpath: webfile:/freemarker/bloomreach/catalog/mycomponent/mycomponent.ftl

##################################

cms


##################################

localhost
Does not show the full fill property

Thanks in advance

Hi,
Seeing that you have both “MyComponent extends BaseDocument” and “MyComponentPage extends BaseHstComponent” with the same 3 data entries, it seems you’re mixing up documents and components.

The ftl writes out the document fields, whereas you’re editing component properties.

This is quite basic, documents are part of the Content Model, components are part of pages, see Delivery Model

HTH
Jeroen

Hi Jeroen,
To be honest i did not get your asnwer. What should I change to make this code works…