Bixby Developer Center

Guides
References

layout

optional

Defines the layout of the given view. You can define this in a separate *.layout.bxb file, under the appropriate locale-specific resources folder, or directly in the given view. For more information, see Layouts.

Note

Be aware of which components you are adding to your layouts and layout macros, because different components are available under different views. If you call a layout or layout macro in a view and that layout specifies a component that the view does not support, Bixby Developer Studio will throw an error. Similarly, you should consider which layout macros are being called within a layout itself. The same layout macro invoked in one component might not be valid if used within a different component, as the list of supported child components could differ.

You can read the Designing with Bixby Views design guide and the Building Bixby Views (UI) developer guide to check if your layout is using the correct components for that moment and that view.

You can loop the components within a layout's content if needed using a for-each loop:

Examples

// Part of a larger view file
// Also demonstrates how to use the `for-each` loop
...
layout {
content {
for-each (x) {
as (y) {
section {
content {
...
}
}
}
}
}
...
layout {
match: Hotel (hotel)
mode (Details)

content {
section {
content {
image-carousel {
images (hotel.images)
}
title-area {
halign (Start)
slot1 {
text {
value ("#{value(hotel.name)}")
style (Title_S)
}
}
slot2 {
paragraph {
value ("From #{value(hotel.lowRate)} • #{value(hotel.rating)} stars")
style (Detail_L)
}
}
slot3 {
layout-macro (hotel-rating) {
param (rating) {
expression (hotel.rating)
}
param (reviewCount) {
if (exists(hotel.reviewCount)) {
expression (hotel.reviewCount)
}
}
}
}
}
}
}
section {
title ("Description")
content {
paragraph {
value ("It is a low-rise boutique hotel that features a pool in the back side of the building, although it's empty.")
style (Detail_L)
}
divider
paragraph {
value ("This is a great place to stay for your visit to San Andreas!")
}
attribution-link {
label {
template ("Open Bixby Developer Center")
}
url {
template ("https://bixbydevelopers.com/")
}
}
}
}
}
}

View on GitHub

Child Keys

section
optional
A container key that can contain a number of various Bixby Views components
select-button-text
optional
Selection button text
layout-macro
optional
Defines a layout or a portion of a layout with a macro