Table of Contents

Callouts

A callout is a instance of a symbol that is connected to a target object. A callout can be static, in which case it always appears when the target object appears, or it can be triggered to appear based on user interaction.

Callouts are often used as labels that display key information about an object. However, the callout functionality in DGLux5 can also be used to create other effects, such as drop-down menus and pop-up dialogs.


A callout functioning as a static label for an image


A callout functioning as a drop-down menu that appears when the shape is clicked

Video Tutorial: Introduction to Callouts

Video Tutorial: Custom Triggers with Callouts

More video tutorials are here.

Create a Simple Callout with Label Parameter

These steps show you how to create a simple callout that has label text that you can edit in the Property Inspector.

  1. Create a symbol that represents the callout:

    1. Right-click the Stage in the Document window or Outline, and select Insert > Components > Text.

    2. Set the fill and stroke and text and font properties of the text component.

    3. Right-click the text component and select Convert to Symbol.

    4. When prompted, name the symbol calloutSym.

  2. Create parameters for the symbol:
    1. In the Symbols Panel, right-click calloutSym and select Edit.
    2. In the Outline, right-click the symbol and select Edit Properties.

    3. Drag one textarea parameter into the right-hand column of the Symbol Parameters dialog.

    4. Double-click the label of the textarea parameter to rename it calloutText, and enter a placeholder value.

    5. Bind the calloutText parameter to the Text property.

  3. Close the Symbol Parameters dialog, and click OK to exit symbol editing mode.

  4. Right-click the Stage in the Document window or Outline, and select Insert > Components > Image.

  5. With the image component selected in the Outline, for URL, click the folder icon and select an image in your project.

  6. With the image component selected in the Outline, under Callout, click Static.

  7. Under Callout, for Symbol, type calloutSym.

  8. For Bond, select Line.

  9. In the Outline, expand the image and select "callout."

  10. Enter a text value for the callout.

  11. In Edit mode, click the image in the Document window, and then drag the callout to control its placement.

Callouts FAQ

How do I create a drop-down menu with multi-select behavior?

How do I create a drop-down menu with multi-select behavior?

How do I create a drop-down menu with multi-select behavior?
The list input component only supports a single selection, but you can use a callout to easily create a drop-down menu that supports multiple selections:

Create a Repeater Inside a Symbol

  1. Create a repeater with multi-select behavior.

  2. Right-click the group that holds the repeater, and select Convert to Symbol.

  3. When prompted, name the symbol dropDown, and click OK.

Set the Callout Properties

  1. Create a text component that represents the collapsed menu:
    1. Right-click the Stage in the Document window or Outline, and select Insert > Components > Text.
    2. Style the appearance and content of the text component using the Property Inspector.
  2. Select the text component in the Outline, and in the Callout properties:
    1. For Callout Type, select Events.
    2. for Symbol, enter dropDown.
    3. Set Position to bottom left.

    4. Set Anchor to top left.

    5. Hover over the Show Callout or Show Trigger property until a blue dot appears, and double-click the blue dot.

    6. Hover over the Hide Callout or Hide Trigger property until a blue dot appears, and double-click the blue dot.

      A small binding dialog appears containing the two properties.

    7. With the text component selected, in the Advanced Properties panel, find onClickOn and bind it to the Show Callout property in the small binding dialog.

    8. With the text component selected, in the Advanced Properties panel, find onClickOff and bind it to the Hide Callout property in the small binding dialog.

  3. Close the small binding dialog.

Track Item Selection

  1. In the Symbols panel, right-click dropDown, and select Edit.

  2. In the Outline, click Dataflow to open dataflow for the symbol.

  3. Add a Select Rows block to the dataflow.

  4. Bind the Table block that drives the repeater to the input property of the Select Rows block.

  5. In the Property Inspector, in the Selection properties, find the Selected Index property, and bind it to the indexes property of the Select Rows block.

  6. In the Outline, right-click the symbol and select Edit Properties.

  7. Drag a tabledata property into the right hand column of the Symbol Parameters dialog.

  8. Double-click the label of the table to rename it selectedOptions

  9. Bind the output table of the Select Rows block to the selectedOptions parameter.

  10. Close the Symbol Parameters dialog and the Dataflow window, and click OK to exit symbol editing mode.

  11. In Preview mode, expand the drop-down and select some items. Then, select "callout" in the Outline and open the table, to access information about the currently selected rows.

Previous: Repeaters

Next:Layout