Simple breadcrumb Sightly component development best practice | Community
Skip to main content
D
danchapmanme
Level 3
October 16, 2015
Solved

Simple breadcrumb Sightly component development best practice

  • October 16, 2015
  • 3 replies
  • 1706 views

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() } }
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Feike_Visser1

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.

3 replies

Feike_Visser1
Adobe Employee
Feike_Visser1Adobe Employee
Adobe Employee
October 16, 2015

why not in just one expression?

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

D
danchapmanmeAuthor
Level 3
October 16, 2015

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?

Feike_Visser1
Adobe Employee
Feike_Visser1Adobe EmployeeAccepted solution
Adobe Employee
October 16, 2015

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.

Terms & ConditionsAccessibility statement

Loading footer...