Product Release: Advanced Bento Smart Snippets
Google+ shareEmail share

A major product release was rolled out on the Bento platform today, which will allow developers to build highly sophisticated and advanced smart snippets with customizable admins. Smart snippet creators will now be able to reference static resources such as CSS and JavaScript to be used when adding smart snippets in the admin.

Users who do not need the additional advanced smart snippet fields will still have access to the same standard variables: Text Field, Text Area, Color Field, Filer File Field, Image Field, Merlin Field, and Optional Image Field. Even if a user is not as advanced, however, they should still feel free to customize how those fields are displayed in the admin.

Building Advanced Smart Snippets:

Users can create advanced smart snippets in the smart snippet area of Bento, by following the same workflow they currently do to create smart snippets. Upon creating a new smart snippet, a user can add the new code, and then select or browse the advanced variable options. Those include the following variables: JSON, Text and TextArea fields. To access the special features, click on the advanced settings section to expose the “admin resources” section.

Image - SS1.png

The predefined widgets are listed on the right. Select an option from the dropdown and enter the CSS and JavaScript resources in the "admin resources" section. As an example, users looking to build an MP3 audio player smart snippet would need to use the Filer File Field standard variable (see image below).

Image - SS2.png

Users using the Merlin field variable would click on that options and the admin resources are populated.

Image - SS3.png

Advanced users who want to create their own customized sources can use the JSON Field widget option, and add their own links to Filer CSS and JavaScript resources. This gives users the ability to create highly customized smart snippet admins.

Adding the Smart Snippet to your Site:

Users should follow the same workflow for adding advanced smart snippets as they currently do in Bento. After locating the page a user would like to add the smart snippet to, a user should select their newly created smart snippet from the dropdown, and begin adding metadata to the required fields.

The Explorer Station Theme smart snippet is a great example of how tools can be customized in the admin. Below you will find a sample advanced smart snippet, and how it can be curated for site use.

Image - SS6.png

Previously, to build a smart snippet like the one featured would have required direct backend development by PBS staff. But after the smart snippet refactoring, shown below, any user can build the admin using standard widgets and custom CSS and JavaScript.

Image - SS7.png

Additional documentation is currently being formalized, and will be posted to the station guide as well as this blog, once it's available.

Please feel free to reach out to your SPI representative or with any questions. If you would like to receive Bento product updates and alerts, you can subscribe here.