Track dynamic data in Project Siena

  • Article

 

Track dynamic data in a Project Siena app by specifying a placeholder string, known as a context variable. Update the data when, for example, a user clicks a button.

If you haven't already, create your first app to learn the basics of Project Siena.

  1. Add a button, and set its OnSelect property to this function:

    UpdateContext({TotalHours:TotalHours+5})

    In this step, you declare a context variable named TotalHours, and you specify that its value will increase by 5 every time this button is clicked.

  2. Add a label, and set its Text property to TotalHours (no quotation marks).

    In this step, you specify that the label shows the value of the variable.

Examples

As a reminder, click Express View to list properties for a control.

Track inventory

Create a simple system for indicating how many product units a customer buys and how many remain in stock.

Two buttons, two labels, and a slider to demonstrate context variables

  1. Add a button, and set its OnSelect property to this function:

    UpdateContext({ViolinsInStock:30})

    In this step, you declare the context variable ViolinsInStock, and you set it to a value of 30.

  2. (optional) For usability, perform these steps:

    • Set the Text property of the button to "Start" (including the quotation marks).

    • Add a label, and move it under the button you added.

    • Set the Text property of the label to "How many violins do you want to buy?" (including the quotation marks).

    Note

    When you set a Text property, the string that you type between quotation marks appears exactly as you typed it. Later, you'll set a property to the name of a context variable, skipping the quotation marks. The value of the variable will appear instead of its name.

  3. Add a slider, name it PurchaseQuantity, and move it under the label tha tyou added.

  4. Set the Default property of the slider to 0, and set its Max property to ViolinsInStock (no quotation marks).

    In this step, you specify that the users can set the slider to any value between 0 and the value of the ViolinsInStock variable.

  5. Add another button, and set itsOnSelect property to this function:

    UpdateContext({ViolinsInStock:ViolinsInStock-PurchaseQuantity!Value})

    In this step, you specify that, whenever the button is clicked, the value of the context variable will decrease by the value to which the slider is set.

  6. (optional) Move the button that you just added so it appears under the slider, and set the Text property of the button to "Buy" (with quotation marks).

  7. Add a label, move it under the button, and set its Text property to this function:

    "Stock remaining: " & ViolinsInStock

  8. Press F5, and then click the Start button that you created.

    The label at the bottom shows that you have 30 violins in stock.

  9. Set the slider to any value, and then click the Buy button.

    The label at the bottom shows that the number of violins in stock decreases by the value that you indicated with the slider. In addition, the maximum value of the slider changes so that you can't buy more violins than you have in stock.

  10. Continue to test the app until you're satisfied that it responds as you expect, and then press Esc to return to the design workspace.

Filter a gallery on another page

  1. Open Project Siena, and rename the default screen FilterPage.

  2. Add a screen, and name it GalleryPage.

  3. On the GalleryPage, create an image gallery, move it to the center of the screen, and resize the gallery to show only one image.

    If you already have a collection of images, you can add an image control instead of a gallery and, in the following steps, replace all instances of QuickstartPictures with the name of your collection.

  4. On the FilterPage, add a radio-button control, name it MyFilter, and set its Items property to QuickstartPictures.

  5. Resize MyFilter to show all the file names of the images you chose (and, if necessary, so the longest file name doesn’t wrap).

  6. Add a Next arrow, move it to the lower-right corner of the screen, and set the OnSelect property of the arrow to this function:

    Navigate(GalleryPage, ScreenTransition!Fade, {FileName:MyFilter!Selected!Title})

  7. On the GalleryPage, set the Items property of the gallery to this function:

    Filter(QuickstartPictures, FileName in Title)

  8. Add a Back arrow, and set its OnSelect property to this function:

    Navigate(FilterPage, ScreenTransition!Fade)

  9. Press F5, click a radio button, and then click the Next arrow.

    The GalleryPage shows the image you chose.

  10. Click the Back arrow, click a different radio button, and then click the Next arrow again.

    The GalleryPage shows the image you chose.

  11. Repeat the previous step until you’re satisfied that the app responds as you expect, and then press Esc to return to the design workspace.

Show a series of images

  1. Copy some pictures to your MyPictures folder, and number them sequentially.

    For example, you might name them 1Paris.jpg, 2Johannesburg.jpg, 3Tokyo.jpg, 4Rio.jpg, and 5Melbourne.jpg.

  2. In Project Siena, create an image gallery that shows the pictures you specified.

  3. (optional) Resize the gallery to show only one image at a time, and delete the label that shows the file name.

  4. Set the Items property of the gallery to this function:

    Filter(QuickstartPictures, PictureID in Title)

    In this step, you specify that the gallery should the show images from the QuickstartPictures data source and that the titles of those images must contain the value of the PictureID context variable, which you’ll set later. The error icon appears because you’ve declared a context variable but not yet set it to a value.

  5. Add a timer, set its Autostart and Repeat properties to true, and set its Duration to 5000.

    In this step, you specify that the timer will start as soon as the app is opened, run for five seconds, and then automatically start over.

  6. Set the OnTimerEnd property of the timer to this function:

    If(PictureID < 5, UpdateContext({PictureID:PictureID +1}), UpdateContext({PictureID:1}))

    In this step, you specify that the value of the PictureID context variable increments by one every five seconds until the value equals 5. If the value of the variable is 5 when the timer ends and restarts, the value is set to 1.

  7. (optional) Set the Visible property of the timer to false.

Each image appears for five seconds before another image replaces it.