previewwidgets

Recognized preview widget types

The following widget types are recognized by Unity:

  • audio
  • video
  • image
  • gallery
  • header
  • actions
  • icon-actions
  • progress
  • text
  • rating-input
  • rating-edit
  • reviews
  • comment-input
  • comment
  • expandable
  • table

audio widget

The audio widget displays a list of tracks with play/pause controls.

List of attributes:

  • tracks A composite attribute containing an array of tuples, where each tuple has up to four fields: title (mandatory string), subtitle (optional string), source (mandatory URI), and length (optional integer specifying the track length in seconds)

You can construct composite attributes with unity::scopes::VariantBuilder:

{
PreviewWidget w1(<span class="stringliteral">&quot;tracks&quot;</span>, <span class="stringliteral">&quot;audio&quot;</span>);
VariantBuilder builder;
builder.add_tuple({
{<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;Track #1&quot;</span>)},
{<span class="stringliteral">&quot;source&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/song1.mp3&quot;</span>)},
{<span class="stringliteral">&quot;length&quot;</span>, Variant(194)}
});
builder.add_tuple({
{<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;Track #2&quot;</span>)},
{<span class="stringliteral">&quot;source&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/song2.mp3&quot;</span>)},
{<span class="stringliteral">&quot;length&quot;</span>, Variant(207)}
});
w1.add_attribute_value(<span class="stringliteral">&quot;tracks&quot;</span>, builder.end());
...
}

video widget

The video widget displays a still from a video and allows playing the video.

List of attributes:

  • source A URI pointing to the video
  • screenshot A URI pointing to a screenshot of the video (optional)
  • share-data An optional dictionary for making this video shareable with Content Hub. See content sharing below.
{
PreviewWidget w1(<span class="stringliteral">&quot;video1&quot;</span>, <span class="stringliteral">&quot;video&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;source&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/video1.mp4&quot;</span>));
...
}

image widget

The image widget displays a single image.

List of attributes:

  • source A URI pointing to the image
  • zoomable A boolean specifying whether the image is zoomable (default: false)
  • fallback A fallback image to be used if the image URI is empty or cannot be retrieved (default: none)
  • share-data An optional dictionary for making this image shareable with Content Hub. See content sharing below.
{
PreviewWidget w1(<span class="stringliteral">&quot;img1&quot;</span>, <span class="stringliteral">&quot;image&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;source&quot;</span>, Variant(<span class="stringliteral">&quot;http://example.com/image.jpg&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;fallback&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/image.jpg&quot;</span>));
...
}

gallery widget

The gallery widget displays a set of images.

List of attributes:

  • sources An array of image URIs
  • fallback A fallback image to be used if an image URI is empty or cannot be retrieved (default: none)
{
PreviewWidget w1(<span class="stringliteral">&quot;gal&quot;</span>, <span class="stringliteral">&quot;gallery&quot;</span>);
<a class="code" href="unity.scopes.md#aa3bf32d584efd902bca79698a07dd934">VariantArray</a> arr;
arr.push_back(Variant(<span class="stringliteral">&quot;http://example.com/image1.jpg&quot;</span>));
arr.push_back(Variant(<span class="stringliteral">&quot;file:///tmp/image2.jpg&quot;</span>));
arr.push_back(Variant(<span class="stringliteral">&quot;file:///tmp/image3.jpg&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;sources&quot;</span>, Variant(arr));
w1.add_attribute_value(<span class="stringliteral">&quot;fallback&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/fallback.png&quot;</span>));
...
}

header widget

The header widget displays basic infomation about the result.

List of attributes:

  • title A string specifying the title
  • subtitle A string specifying the subtitle
  • mascot A URI specifying the mascot
  • fallback A fallback image to be used if the mascot URI is empty or cannot be retrieved (default: none)
  • emblem A URI specifying the emblem
{
PreviewWidget w1(<span class="stringliteral">&quot;hdr&quot;</span>, <span class="stringliteral">&quot;header&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;Result item&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;mascot&quot;</span>, Variant(<span class="stringliteral">&quot;http://example.com/image.png&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;fallback&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/fallback_mascot.png&quot;</span>));
...
}

actions widget

The actions widget displays one or more buttons.

List of attributes:

  • actions A composite attribute containing an array of tuples, where each tuple has at least these fields: id (a mandatory string that is passed to unity::scopes::ScopeBase::activate_preview_action()), label (mandatory string), and icon (optional URI).

You can construct composite attributes with unity::scopes::VariantBuilder:

{
PreviewWidget w1(<span class="stringliteral">&quot;buttons&quot;</span>, <span class="stringliteral">&quot;actions&quot;</span>);
VariantBuilder builder;
builder.add_tuple({
{<span class="stringliteral">&quot;id&quot;</span>, Variant(<span class="stringliteral">&quot;open&quot;</span>)},
{<span class="stringliteral">&quot;label&quot;</span>, Variant(<span class="stringliteral">&quot;Open&quot;</span>)}
});
builder.add_tuple({
{<span class="stringliteral">&quot;id&quot;</span>, Variant(<span class="stringliteral">&quot;download&quot;</span>)},
{<span class="stringliteral">&quot;label&quot;</span>, Variant(<span class="stringliteral">&quot;Download&quot;</span>)}
});
w1.add_attribute_value(<span class="stringliteral">&quot;actions&quot;</span>, builder.end());
...
}

icon-actions widget

The icon-actions widget displays one or more buttons represented by icons and/or labels. It's similar to actions widget, but uses different layout. Every button can provide an optional temporary icon to be displayed immediately after user taps it.

List of attributes:

  • actions A composite attribute containing an array of tuples, where each tuple has at least these fields: id (a mandatory string that is passed to unity::scopes::ScopeBase::activate_preview_action()), label (optional string), icon (optional URI, required if label is missing), temporaryIcon (optional URI).

progress widget

The progress widget displays the progress of an action, such as download progress.

On completion, the scope receives a preview action activation with the id "finished" or "failed", depending on the outcome of the operation.

List of attributes:

  • source A tuple with keys understood by a progress provider
{
PreviewWidget w1(<span class="stringliteral">&quot;download&quot;</span>, <span class="stringliteral">&quot;progress&quot;</span>);
<a class="code" href="unity.scopes.md#ad5d8ccfa11a327fca6f3e4cee11f4c10">VariantMap</a> tuple;
tuple[<span class="stringliteral">&quot;dbus-name&quot;</span>] = <span class="stringliteral">&quot;com.canonical.DownloadManager&quot;</span>;
tuple[<span class="stringliteral">&quot;dbus-object&quot;</span>] = <span class="stringliteral">&quot;/com/canonical/download/obj1&quot;</span>;
w1.add_attribute_value(<span class="stringliteral">&quot;source&quot;</span>, Variant(tuple));
...
}

text widget

A text widget can be used for text of any length (without formatting).

List of attributes:

  • title Optional string
  • text A string containing the text
{
PreviewWidget w1(<span class="stringliteral">&quot;summary&quot;</span>, <span class="stringliteral">&quot;text&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;text&quot;</span>, Variant(<span class="stringliteral">&quot;Lorem Ipsum ...&quot;</span>));
...
}

rating-input widget

The rating-input widget allows users to rate content. It consists of two types of widget: a star-based rating and an input field for the user to enter his/her review. It is possible to hide each widget as well as to require them to be filled in.

When a user presses the "Send" button, the scope receives a preview action activation with the id "rated". The actual rating and/or review can be accessed via unity::scopes::ActionMetadata::scope_data. The scope data will be a VariantMap with the following keys:

  • "rating" - a double holding the number of stars the user selected (1 to 5)
  • "review" - a string holding the free text review

List of attributes:

  • rating-label String for the star-based rating (default: "Rate this")
  • review-label String for the review input (default: "Add a review")
  • submit-label String for the confirmation button (default: "Send")
  • rating-icon-empty URI for an empty rating icon
  • rating-icon-full URI for a full rating icon
  • visible String specifying which of the two widgets are visible ("rating", "review" or default:"both")
  • required String specifying which of the two widgets are required to be filled in ("rating", "review" or default:"both")
{
PreviewWidget w1(<span class="stringliteral">&quot;rating&quot;</span>, <span class="stringliteral">&quot;rating-input&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;visible&quot;</span>, Variant(<span class="stringliteral">&quot;rating&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;required&quot;</span>, Variant(<span class="stringliteral">&quot;rating&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;rating-icon-empty&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/star-empty.svg&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;rating-icon-full&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/star-full.svg&quot;</span>));
...
}

rating-edit widget

The rating-edit widget allows users to edit an existing review and rating. When used in a preview, the widget displays an existing review and a small "pen" icon; user can update the review and/or rating after tapping the "pen" icon.

This widget supports all the attributes of rating-input widget, plus three extra attributes ("review", "rating", "author") to pre-fill the widget with data of an existing review.

List of attributes:

  • rating-label String for the star-based rating (default: "Rate this")
  • review-label String for the review input (default: "Add a review")
  • submit-label String for the confirmation button (default: "Send")
  • rating-icon-empty URI for an empty rating icon
  • rating-icon-full URI for a full rating icon
  • visible String specifying which of the two widgets are visible ("rating", "review" or default:"both")
  • required String specifying which of the two widgets are required to be filled in ("rating", "review" or default:"both")
  • author String for the name of the reviewer (optional)
  • review String for the text of existing review (optional)
  • rating Number for the rating value (optional)

Note: The rating-edit widget may not be supported by older versions of unity8 shell.

reviews widget

The reviews widget is used to display previously-rated content.

List of attributes:

  • rating-icon-empty URI for an empty rating icon
  • rating-icon-half URI for an half-full rating icon
  • rating-icon-full URI for a full rating icon
  • reviews A composite attribute containing an array of tuples, where each tuple has up to three fields: rating (optional integer specifying the number of stars), author (mandatory string) and review (optional string).

You can construct composite attributes with unity::scopes::VariantBuilder:

{
PreviewWidget w1(<span class="stringliteral">&quot;summary&quot;</span>, <span class="stringliteral">&quot;reviews&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;rating-icon-empty&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/star-empty.svg&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;rating-icon-full&quot;</span>, Variant(<span class="stringliteral">&quot;file:///tmp/star-full.svg&quot;</span>));
VariantBuilder builder;
builder.add_tuple({
{<span class="stringliteral">&quot;author&quot;</span>, Variant(<span class="stringliteral">&quot;John Doe&quot;</span>)},
{<span class="stringliteral">&quot;rating&quot;</span>, Variant(3)}
});
builder.add_tuple({
{<span class="stringliteral">&quot;author&quot;</span>, Variant(<span class="stringliteral">&quot;Mr. Smith&quot;</span>)},
{<span class="stringliteral">&quot;rating&quot;</span>, Variant(5)}
});
w1.add_attribute_value(<span class="stringliteral">&quot;reviews&quot;</span>, builder.end());
...
}

comment-input widget

The comment-input widget allows users to add comments. It displays an input box along with "Send" button.

When a user presses the "Send" button, the scope receives a preview action activation with the id "commented". The actual comment can be accessed via unity::scopes::ActionMetadata::scope_data. The scope data will be a VariantMap with the "comment" field holding the text entered by the user.

List of attributes:

  • submit-label String for the label of the submit button (optional, uses "Submit" by default).
{
PreviewWidget w1(<span class="stringliteral">&quot;cmt&quot;</span>, <span class="stringliteral">&quot;comment-input&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;submit-label&quot;</span>, Variant(<span class="stringliteral">&quot;Comment it!&quot;</span>));
...
}

comment widget

The comment widget shows an avatar, author name, subtitle and a comment text.

List of attributes:

  • source URI for an avatar icon (optional)
  • author A string specifying the author of the comment (mandatory)
  • subtitle A string for the subtitle (optional)
  • comment A string for the comment text (mandatory)

expandable widget

The expandable widget is used to group several widgets into an expandable pane. The expandable widget can be collapsed or uncollapsed. When it's uncollapsed then all the contained widgets are shown. When collapsed, only the first few widgets determined by collapsed-widgets attribute are shown.

List of attributes:

  • title A string specifying the title
  • collapsed-widgets A number of widgets to show when the expandable widget is collapsed (optional).
PreviewWidget expandable(<span class="stringliteral">&quot;exp&quot;</span>, <span class="stringliteral">&quot;expandable&quot;</span>);
expandable.add_attribute_value(<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;This is an expandable widget&quot;</span>));
expandable.add_attribute_value(<span class="stringliteral">&quot;collapsed-widgets&quot;</span>, Variant(2));
PreviewWidget w1(<span class="stringliteral">&quot;w1&quot;</span>, <span class="stringliteral">&quot;text&quot;</span>);
w1.add_attribute_value(<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;Subwidget 1&quot;</span>));
w1.add_attribute_value(<span class="stringliteral">&quot;text&quot;</span>, Variant(<span class="stringliteral">&quot;A text&quot;</span>));
PreviewWidget w2(<span class="stringliteral">&quot;w2&quot;</span>, <span class="stringliteral">&quot;text&quot;</span>);
w2.add_attribute_value(<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;Subwidget 2&quot;</span>));
w2.add_attribute_value(<span class="stringliteral">&quot;text&quot;</span>, Variant(<span class="stringliteral">&quot;A text&quot;</span>));
PreviewWidget w3(<span class="stringliteral">&quot;w3&quot;</span>, <span class="stringliteral">&quot;text&quot;</span>);
w3.add_attribute_value(<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;Subwidget 3&quot;</span>));
w3.add_attribute_value(<span class="stringliteral">&quot;text&quot;</span>, Variant(<span class="stringliteral">&quot;A text&quot;</span>));
expandable.add_widget(w1);
expandable.add_widget(w2);
expandable.add_widget(w3);
...

table widget

The table widget is used to show a table with labels and values. When used inside an Expandable widget, the topmost 3 rows are shown until it's expanded.

List of attributes:

  • title A string specifying the title to be shown on top
  • values An array with one element per row. Each element is an array of two strings: label and value
PreviewWidget table(<span class="stringliteral">&quot;details&quot;</span>, <span class="stringliteral">&quot;table&quot;</span>);
table.add_attribute_value(<span class="stringliteral">&quot;title&quot;</span>, Variant(<span class="stringliteral">&quot;This is a table widget&quot;</span>));
<a class="code" href="unity.scopes.md#aa3bf32d584efd902bca79698a07dd934">VariantArray</a> values {
Variant{<a class="code" href="unity.scopes.md#aa3bf32d584efd902bca79698a07dd934">VariantArray</a>{Variant{_(<span class="stringliteral">&quot;Version number&quot;</span>)}, Variant{<span class="stringliteral">&quot;0.83b&quot;</span>}}},
Variant{<a class="code" href="unity.scopes.md#aa3bf32d584efd902bca79698a07dd934">VariantArray</a>{Variant{_(<span class="stringliteral">&quot;Last updated&quot;</span>)}, Variant{<span class="stringliteral">&quot;2015-01-15&quot;</span>}}},
Variant{<a class="code" href="unity.scopes.md#aa3bf32d584efd902bca79698a07dd934">VariantArray</a>{Variant{_(<span class="stringliteral">&quot;First released&quot;</span>)}, Variant{<span class="stringliteral">&quot;2013-12-16&quot;</span>}}},
Variant{<a class="code" href="unity.scopes.md#aa3bf32d584efd902bca79698a07dd934">VariantArray</a>{Variant{_(<span class="stringliteral">&quot;Size&quot;</span>)}, Variant{<span class="stringliteral">&quot;11.3 MiB&quot;</span>}}},
};
table.add_attribute_value(<span class="stringliteral">&quot;values&quot;</span>, Variant(values));
...

Content sharing

Some widgets support content sharing with the special share-data attribute. When the widget is tapped (clicked), data (image, video etc.) can be shared with Content Hub.

The share-data attribute is a dictionary (VariantMap) that needs to contain the following keys:

  • uri A single URI to share or an array of URIs.
  • content-type A name of the content type known to Content Hub, e.g. "links", "pictures", "videos". Please refer to Content Hub documentation for information on supported content types.

Here is an example of a shareable image:

``` PreviewWidget image("img", "image"); image.add_attribute_value("source", Variant(class="stringliteral">&quot;http://www.example.org/graphics.png")); VariantMap share_data; share_data["uri"] = Variant(class="stringliteral">&quot;http://www.example.org/graphics_big.png"); share_data["content-type"] = Variant("pictures"); image.add_attribute_value("share-data", share_data);