PICKZEN
  • FAQ
  • Security in Pickzen
  • Builder
    • Builder Overview
    • Questions
      • Types and layouts
      • Display settings
      • Styling the text
      • Slide settings
      • Admin names
      • Slide help
      • Feedback slide
      • End slide
        • Number of outcomes
        • Forget results
        • Automatic redirect
        • Recommending content
      • Skip Logic
        • Branching controlled by slides
        • Branching controlled by tree
    • Products
      • Selecting products
      • Managing products
    • Linking
      • Linking choices to products
    • Install
      • Notification
      • Link
      • Button
      • Embedded
    • Lead Generation
      • Lead capture before recommendation
      • Receiving leads by e-mail
      • Sending e-mails to new leads
        • Adding customized data to e-mails
    • Advanced
      • Product attributes
      • Features table
        • Features from linking
        • Features from attributes
        • Smart texts
      • Insertable texts
        • User answers
        • Response based texts
      • Slots
  • Analytics
    • A/B Tests
      • Launching an A/B Test
      • Reviewing A/B test results
    • Insight panel
      • Overview
      • Responses
      • Leads
    • Parameters tracking
    • Sales tracking
  • Integrations
    • Your website
      • Pickzen Code
        • Installing the Pickzen Code in Shopify
        • Installing the Pickzen Code on any website
      • Add to cart
      • Add all to cart
    • MailChimp
    • Klaviyo
    • HubSpot
    • Zapier
    • Recharge
      • Recharge v1
      • Recharge v2
    • Product Feeds
    • Google Analytics
    • Facebook
  • Guides
    • Facebook/Instagram retargeting
    • HubSpot guide
    • MailChimp guide
    • Klaviyo guide
    • No-Code
      • Builder
        • Aliases
        • Tables
          • Executable tables
          • Data tables
          • Cell types
        • Settings
        • Simulation
      • Functions
        • ADDTO
        • CONCAT
        • EMPTY
        • EVALTABLE
        • EXTRACT
        • FIRST
        • FLAT
        • LOG
        • NTH
        • PERSONALITY
        • PRESCRIBE
        • PRESCRIBESLOTS
        • PROPERTY
        • RANK
        • RECIDS
        • RECGROUP
        • RECSKUS
        • REFINE
        • REMOVEFROM
        • SECOND
        • SLOTS
        • SPLIT
        • TABLEVALUE
        • TRUNC
      • Tutorials
        • Prescription Rules + Taglines
        • Calculator
  • Design System
    • Enabling the DS
    • The builder
      • Preview panel
      • Components panel
      • Properties panel
    • Properties
    • Variants
    • Properties values
      • Parametrization
      • References
      • Deferred actions
    • Components
      • [Base]
      • Button
      • Collapsable
      • Container
      • CoverSlide
      • Deck
      • Dropdown
      • EndFormSlide
      • EndSlide
      • FeedbackSlide
      • FormMapper
      • FormSlide
      • Grid
      • HTML
      • Icon
      • Image
      • InputDate
      • InputNumber
      • InputText
      • Label
      • Link
      • Product
      • ProgressBar
      • QuestionSlide
      • Repeater
      • Separator
      • SlideRenderer
      • Specs
      • TextArea
    • Views
    • Editor settings
    • Accesibility
    • Interceptors
    • HowTo
      • Show a variant programmatically
      • Use CSS in custom component
  • Administration
    • Managing accounts
      • Inviting collaborators
      • Requesting access
    • Copying pickzens between accounts
    • Replacing pickzens
    • Recovering versions
  • Developers
    • Developers panel
      • CSS customization
      • JavaScript customization
    • JavaScript API
      • Hooks
      • HOWTOs
        • How to add results
        • How to get the answers
        • How to decorate products
        • Escaping the iframe
    • REST API
      • API rate limit
      • Assistants resource
      • Responses resource
    • SDK
      • Documentation
        • Engine
        • Slide
        • CoverSlide
        • QuestionSlide
          • QuestionOption
        • FeedbackSlide
        • FormSlide
          • FormField
            • SelectorField
            • SelectorFieldOption
            • ImageField
        • EndSlide
          • Result
      • HOWTOs
        • Populate custom dropdown
Powered by GitBook
On this page
  1. Design System
  2. Properties values

Deferred actions

PreviousReferencesNextComponents

Last updated 3 years ago

Say you need to create a component and allow the user to interact with it. For example, the component SelectableText which used to render the answers of a slide. The answers can have additional help information that should be displayed in case the user needs it. So, first we need to pass a parameter to this component indicating if the actual answer has help information:

We also have to pass another parameter with the action to execute when the user clicks on the help icon that this component adds when its Help property is true. If we used a reference, it wouldn't work because the action would be executed when the component SelectableText was rendered. However, we only need to pass a wrapper of the action to be executed whenever the component internally decides. For that, we need to create a deferred action.

This component defines the property HelpEvent to pass this action:

Click on the bull's eye icon, change the type to Deferred action and enter the following information:

In this case, we are creating a deferred action that when executed, will call to the showHelp action of the deck component passing the parameter $item.getHelp that will resolve to the current answer (item) calling over it at the same time the action getHelp. So, basically what it is being done here is creating a deferred action that will display the answer actual help information.

In this example, the component SelectableText is inside the component Repeater that defines its Iterator property as item, making the item (answer) accessible to the SelectableText component via the $item declaration:

When a property is configured by reference, a clock will appear at the left of the field: