Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Simple breadcrumb Sightly component development best practice

Avatar

Level 4

I am developing a simple breadcrumb component as my first Sightly component. I am really liking it. Even moving from a component perviously built JSTL component, the presentation code has gone from 46 lines to 8 lines. 

I am extending WCMUse for the model logic e.g to build a list of trail items (pages).

I have a small requirement to show the trail title based on if specific properties exist e.g. navigation title, then page title, then page name.

I could approach this in two ways:

1. Return a list of pages (com.day.cq.wcm.api.Page) from the model (Java class) and use the view logic (JavaScript) to show one of the three properties.

breadcrumb-trail.js

trail.title = this.page.navigationTitle || this.page.title || this.page.name;

2. Let the model (Java class) create a trail item model that exposes a title property containing the logic to show navigation title, page title or name.

BreadcrumbTrailItem.java

public String getTitle() { if (StringUtils.IsNotEmpty(trailPage.getNavigationTitle())) { return trailPage.getNavigationTitle(); } else if (StringUtils.IsNotEmpty(trailPage.getTitle()) { return trailPage.getTitle(); } else { return trailPage.getName() } }
1 Accepted Solution

Avatar

Correct answer by
Employee

To me in this case the Javascript is not really needed here.

And to avoid logic in too many places, you can create a data-sly-template that is used in many places, this then holds the logic to print the write name.

<template data-sly-template.pageTitle="${ @ page }>

<div>${ page.navigationTitle || page.title || page.name }</div>

</template>

Then you can call this via <li data-sly-call="${ pageTitle @ page = item.page}"></li>

Hope this helps.

View solution in original post

3 Replies

Avatar

Employee

why not in just one expression?

${ yourvar.page.navigationTitle || yourvar.page.title || yourvar.page.name }

Avatar

Level 4

Thanks Feike,

I wanted to avoid having logic in too many difference places in addition to the JavaScript and Java models. I guess I could remove the JavaScript file all together.

Is it normal to use a Java class model and a JavaScript model together, or should only one used of the other?

Avatar

Correct answer by
Employee

To me in this case the Javascript is not really needed here.

And to avoid logic in too many places, you can create a data-sly-template that is used in many places, this then holds the logic to print the write name.

<template data-sly-template.pageTitle="${ @ page }>

<div>${ page.navigationTitle || page.title || page.name }</div>

</template>

Then you can call this via <li data-sly-call="${ pageTitle @ page = item.page}"></li>

Hope this helps.