Bap Share Widget

Bosch Gallery

Bap Vpf React Widget

Key Features

Frequently Asked Questions

Asset Publisher

null Grow with Bosch

An error occurred while processing the template.
The following has evaluated to null or missing:
==> item.descImg  [in template "20097#20123#15271672" at line 47, column 86]

----
Tip: It's the step after the last dot that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----

----
FTL stack trace ("~" means nesting-related):
	- Failed at: #if item.descImg.getData()?has_content  [in template "20097#20123#15271672" at line 47, column 81]
----
1<section aria-label="What we do" class="what-we-do"> 
2	<div class="accordion-grid-wrapper"> 
3		<div class="show-desktop"> 
4			<#if gridItemTitle.getSiblings()?has_content> 
5    			<#assign tabId=0 /> 
6    			<#assign tabId1 = 0 /> 
7    			<#list gridItemTitle.getSiblings()?chunk(4) as cur_gridItemTitle> 
8					<div class="container"> 
9						<div class="row grid-row"> 
10							<#list cur_gridItemTitle as item> 
11								<div class="col-md-3"> 
12									<div> 
13										<a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse"> 
14											<h5 class="mb-0"> 
15												<button class="btn btn-link collapsed" type="button" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}"> 
16													<div> 
17														<#if item.gridItemImage.getData()?has_content> 
18															<div class="grid-section-image"> 
19																<img alt="${item.getData()}" src="${item.gridItemImage.getData()}"> 
20															</div> 
21														</#if> 
22														<div class="grid-section-heading"> 
23															<span class="plus-icon"> 
24																<i class="bap-icon bap-plus"> </i> 
25															</span> 
26															<span class="grid-section-heading-text"> 
27																${item.getData()} 
28															</span> 
29														</div> 
30														<div class="triangle-up"></div> 
31													</div> 
32												</button> 
33											</h5> 
34										</a> 
35									</div> 
36								</div> 
37								<#assign tabId = tabId + 1/>	 
38							</#list> 
39						</div> 
40        			</div> 
41        			 
42					<div class="desc-wrapper"> 
43						<#list cur_gridItemTitle as item> 
44							<div class="col-12 order-md-last collapse fade show" id="heading_${tabId1}"> 
45								<div class="container"> 
46									<div class="row"> 
47										<#if item.descImg.getData()?has_content> 
48											<div class="col-md-5"> 
49												<img alt="${item.getData()}" src="${item.descImg.getData()}"> 
50											</div> 
51											<div class="col-md-7"> 
52												<h4>${item.getData()}</h4> 
53												${item.gridItemDescription.getData()} 
54											</div> 
55										<#elseif item.gridItemImage.getData()?has_content> 
56											<div class="col-md-5"> 
57												<img alt="${item.getData()}" src="${item.gridItemImage.getData()}"> 
58											</div> 
59											<div class="col-md-7"> 
60												<h4>${item.getData()}</h4> 
61										 
62												${item.gridItemDescription.getData()} 
63											</div> 
64										<#else> 
65											<div class="col-md-12"> 
66												<h4>${item.getData()}</h4> 
67									 
68												${item.gridItemDescription.getData()} 
69											</div> 
70										</#if> 
71									</div> 
72								</div> 
73							</div> 
74							<#if cur_gridItemTitle?counter <= 4> 
75								<#assign tabId1 = tabId1 +1 /> 
76							<#elseif cur_gridItemTitle?counter == 4> 
77								<#assign tabId1 = tabId +4 /> 
78							<#elseif cur_gridItemTitle?counter gte 8> 
79								<#assign tabId1 = tabId1 +8 /> 
80							</#if>	 
81						</#list> 
82					</div>	 
83    			</#list> 
84			</#if>			 
85		</div> 
86 
87		 
88 
89	<div class="show-desktop-medium"> 
90		<div> 
91			<#if gridItemTitle.getSiblings()?has_content> 
92			<#assign tabId=0 /> 
93			<#assign tabId1 = 0 /> 
94			<#list gridItemTitle.getSiblings()?chunk(3) as cur_gridItemTitle> 
95				<div> 
96					<div class="row grid-row"> 
97						<#list cur_gridItemTitle as item> 
98							<div class="col-md-4"> 
99								<div> 
100									<a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse"> 
101										<h5 class="mb-0"> 
102											<button class="btn btn-link collapsed" type="button" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}"> 
103												<div> 
104													<#if item.gridItemImage.getData()?has_content> 
105														<div class="grid-section-image"> 
106															<img alt="${item.getData()}" src="${item.gridItemImage.getData()}"> 
107														</div> 
108													</#if> 
109													<div class="grid-section-heading"> 
110														<span class="plus-icon"> 
111															<i class="bap-icon bap-plus"> </i> 
112														</span> 
113														<span class="grid-section-heading-text"> 
114															${item.getData()} 
115														</span> 
116														 
117													</div> 
118													<div class="triangle-up"></div> 
119												</div> 
120											</button> 
121										</h5> 
122									</a> 
123								</div> 
124							</div> 
125							<#assign tabId = tabId + 1/>	 
126						</#list> 
127					</div> 
128				</div> 
129				 
130				<div class="desc-wrapper"> 
131				<#list cur_gridItemTitle as item> 
132					 
133						<div class="col-12 order-md-last collapse fade show" id="heading_${tabId1}"> 
134							<div class="row"> 
135								<#if item.descImg.getData()?has_content> 
136									<div class="col-md-6"> 
137										<img alt="${item.getData()}" src="${item.descImg.getData()}"> 
138									</div> 
139									<div class="col-md-6"> 
140										<h4>${item.getData()}</h4> 
141									 
142										${item.gridItemDescription.getData()} 
143									</div> 
144									<#elseif item.gridItemImage.getData()?has_content> 
145										<div class="col-md-6"> 
146											<img alt="${item.getData()}" src="${item.gridItemImage.getData()}"> 
147										</div> 
148										<div class="col-md-6"> 
149											<h4>${item.getData()}</h4> 
150										 
151											${item.gridItemDescription.getData()} 
152										</div> 
153									<#else> 
154										<div class="col-md-12"> 
155										<h4>${item.getData()}</h4> 
156										${item.gridItemDescription.getData()} 
157									</div> 
158								</#if> 
159							</div> 
160						</div> 
161					 
162					<#if cur_gridItemTitle?counter <= 3> 
163						<#assign tabId1 = tabId1 +1 /> 
164					<#elseif cur_gridItemTitle?counter == 3> 
165						<#assign tabId1 = tabId +3 /> 
166					<#elseif cur_gridItemTitle?counter gt 6> 
167						<#assign tabId1 = tabId1 +6 /> 
168					<#else> 
169						<#assign tabId1 = tabId1 +1 /> 
170					</#if>	 
171				</#list> 
172				</div>	 
173			</#list> 
174		</#if>			 
175		</div> 
176	</div>	 
177		<div class="show-mobile"> 
178			<div> 
179				<#if gridItemTitle.getSiblings()?has_content> 
180					<#assign tabId=0 /> 
181					<#list gridItemTitle.getSiblings() as cur_gridItemTitle> 
182						<#if tabId == 0 || tabId%4 == 0> 
183							<div class="grid-row"> 
184						</#if> 
185								<div class="grid-column"> 
186									<div> 
187										<a class="grid-item collapsed" href="#heading_${tabId}" data-toggle="collapse"> 
188											<h5 class="mb-0"> 
189												<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse_${tabId}" aria-expanded="false" aria-controls="collapse_${tabId}"> 
190													<div> 
191														<#if cur_gridItemTitle.gridItemImage.getData()?has_content> 
192															<div class="grid-section-image"> 
193																<img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.gridItemImage.getData()}"> 
194															</div> 
195														</#if> 
196														<div class="grid-section-heading"> 
197															<span class="plus-icon"> 
198																<i class="bap-icon bap-plus"> </i> 
199															</span> 
200															<span class="grid-section-heading-text"> 
201																${cur_gridItemTitle.getData()} 
202															</span> 
203															 
204														</div> 
205														<div class="triangle-up"></div> 
206													</div> 
207												</button> 
208											</h5> 
209										</a> 
210									</div> 
211								</div> 
212								<div class="desc-wrapper"> 
213									<div class="col-12 order-md-last collapse show" id="heading_${tabId}"> 
214										<div class="row"> 
215											<#if cur_gridItemTitle.descImg.getData()?has_content> 
216												<div class="col-md-6"> 
217													<h4>${cur_gridItemTitle.getData()}</h4> 
218													${cur_gridItemTitle.gridItemDescription.getData()} 
219												</div> 
220												<div class="col-md-6"> 
221													<img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.descImg.getData()}"> 
222												</div> 
223											<#elseif cur_gridItemTitle.gridItemImage.getData()?has_content> 
224												<div class="col-md-6"> 
225													<h4>${cur_gridItemTitle.getData()}</h4> 
226													${cur_gridItemTitle.gridItemDescription.getData()} 
227												</div> 
228												<div class="col-md-6"> 
229													<img alt="${cur_gridItemTitle.getData()}" src="${cur_gridItemTitle.gridItemImage.getData()}"> 
230												</div> 
231											<#else> 
232												<div class="col-md-6"> 
233													<h4>${cur_gridItemTitle.getData()}</h4> 
234													${cur_gridItemTitle.gridItemDescription.getData()} 
235												</div> 
236											</#if> 
237										</div> 
238									</div> 
239								</div> 
240								<#assign tabId = tabId +1 /> 
241						<#if tabId == 0 || tabId%4 == 0> 
242							</div> 
243						</#if> 
244					</#list> 
245				</#if>			 
246			</div> 
247		</div> 
248	</div> 
249	 
250 
251</section> 
252 
253<script> 
254//enable accordion behavior to show only 1 detail at a time 
255$(".what-we-do .card-body a").addClass("collapsed"); 
256$(".what-we-do .col-12").removeClass("show"); 
257$(document).on("click", '.what-we-do [data-toggle="collapse"]', function() { 
258	$(".what-we-do .plus-icon").removeClass("active"); 
259    $('.what-we-do .collapse.show').collapse('hide'); 
260	if(!$(this).hasClass("collapsed")){ 
261		$(this).find(".plus-icon").addClass("active"); 
262	} else{ 
263		$(this).find(".plus-icon").removeClass("active"); 
264
265}); 
266</script> 
267 
268<style> 
269 
270.what-we-do .grid-item .triangle-up { 
271    width: 0; 
272    height: 0; 
273    border-left: 35px solid transparent; 
274    border-right: 35px solid transparent; 
275    border-bottom: 25px solid #eff1f2; 
276    position: absolute; 
277    bottom: -40px; 
278    left: 5px; 
279
280 
281.what-we-do .grid-item.collapsed .triangle-up { 
282	display:none; 
283
284.what-we-do .grid-section-heading { 
285    color: rgb(0, 0, 0); 
286    cursor: pointer; 
287    display: block; 
288    font-size: 20px; 
289    font-weight: 700; 
290	margin-top: 15px; 
291	display: flex; 
292    text-align: left; 
293	align-items: center; 
294
295 
296.what-we-do .grid-section-heading .plus-icon.active .bap-plus { 
297    transform: rotate(45deg); 
298    transition: all 0.5s; 
299
300 
301.what-we-do .grid-row { 
302    padding: 20px 0 20px 0; 
303        margin-bottom: 20px; 
304    position: relative; 
305
306 
307.what-we-do .grid-row button.btn.btn-link { 
308    box-shadow: none; 
309
310 
311.what-we-do .grid-row .btn-link:hover{ 
312	text-decoration: none; 
313
314 
315.what-we-do .grid-row .btn { 
316	padding: 0; 
317
318 
319.what-we-do .plus-icon { 
320    position: relative; 
321    -webkit-flex: none; 
322    -ms-flex: none; 
323    width: 44px; 
324    height: 44px; 
325    margin-right: 15px; 
326    border: 1px solid #e0e2e5; 
327    border-radius: 50%; 
328    background-color: #fff; 
329    line-height: 40px; 
330    font-size: 16px; 
331    color: #007bc0; 
332	text-align: center; 
333    font-weight: 700; 
334
335 
336.what-we-do .plus-icon .bap-icon { 
337	font-weight: 700; 
338	font-size: 16px; 
339
340 
341.what-we-do .desc-wrapper { 
342    background: #eff1f2; 
343
344 
345.what-we-do .desc-wrapper .col-12 { 
346    padding: 90px 60px 40px 90px; 
347    padding-top: 40px; 
348
349 
350.what-we-do .desc-wrapper img { 
351    width: 100%; 
352
353 
354.what-we-do .desc-wrapper h4 { 
355    font-size: 36px; 
356    color: #000; 
357	margin-bottom: 25px; 
358
359 
360.what-we-do .desc-wrapper p { 
361	color: #000; 
362
363 
364@media(min-width: 991px) { 
365	.what-we-do .show-desktop-medium { 
366			display: none; 
367
368	.what-we-do .show-mobile { 
369		display: none; 
370
371
372 
373@media(min-width: 768px) and (max-width: 991px) { 
374	.what-we-do .show-desktop { 
375		display: none; 
376
377 
378	.what-we-do .show-mobile { 
379		display: none; 
380
381 
382	.what-we-do .show-desktop-medium { 
383		display: block; 
384
385 
386	.what-we-do .show-desktop-medium .grid-row { 
387		padding: 20px; 
388
389 
390	.what-we-do .container { 
391		padding-left: 0; 
392		margin-left: 18px; 
393
394 
395	.what-we-do .show-desktop-medium .desc-wrapper .col-12 { 
396		padding: 55px 30px 40px 30px; 
397
398
399 
400@media(max-width: 767px) { 
401	.what-we-do .show-desktop { 
402		display: none; 
403
404 
405	.what-we-do .show-desktop-medium { 
406		display: none; 
407
408 
409	.what-we-do .show-mobile { 
410		display: block; 
411
412 
413	.what-we-do .show-mobile .grid-row { 
414		padding: 0; 
415
416 
417	.what-we-do .show-mobile .grid-column { 
418		padding: 20px; 
419		position: relative; 
420		margin-bottom: 20px; 
421
422 
423	.what-we-do .desc-wrapper .col-12 { 
424		padding: 40px; 
425
426 
427	.what-we-do .grid-section-heading-text { 
428		font-size: 16px; 
429
430	.what-we-do .grid-item .triangle-up { 
431	    bottom: -20px; 
432
433
434 
435@media(min-width: 768px) { 
436	.what-we-do .show-mobile { 
437		display: none; 
438
439
440</style> 

Video

Sales Assets

Note: WIP - We are using hard-coded values for now.

Bap Product Carousel

Bap Product Carousel

Product Details