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

Simple breadcrumb Sightly component development best practice

  • October 16, 2015
  • 3 replies
  • 1705 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
Feike_Visser1
Employee
October 16, 2015

why not in just one expression?

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

D
danchapmanmeAuthor
New Participant
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
Feike_Visser1Accepted solution
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...