Help

2 min read

Feature module

The Dynamic content feature module includes all the presentation logic required to display the DynamicComponents. If you need to include this module, add it to your build.gradle: 

implementation ("com.poqstudio:content.dynamiccontent:$VERSION_NAME")

DynamicComponents

Dynamic content SDK can render different UI components called DynamicComponents. These are the supported DynamicComponents:

  • Primitive:
    • Button: it shows a button with primary, secondary or tertiary styles.
    • Empty: it shows nothing, i.e.: an HorizontalSplitter with an empty component.
    • HorizontalDivider: it shows a grey horizontal line to use as content divider.
    • Html it shows HTML content,
    • Text: it shows text with the style and alignment received.
    • TextField: it shows a PoqTextField
    • Image: it shows a full width image respecting its aspect ratio.
    • Spacer: it shows a Spacer with the provided height.
    • Video: it shows a full width video with no controls, which plays looping indefinitely when more than 50% of its surface is visible. When multiple videos are visible, the one closest to the center of the screen will play.
  • Container:
    • Column: it shows its childs components in a column.
    • HorizontalSplitter: it shows its childs components in a row splitting the space equally.
    • ScrollableColumn: it shows its childs components in a Lazy column.
  • Carousel:
    • ImageCarousel
      • Square: it shows an image carousel with square images.
      • Peek: it shows an image carousel, the image width will be 80% of the screen width and the height will respect the original image aspect ratio.
      • FullWidth: it shows an image carousel, the image will cover the entire width of the screen and the height will respect the original image aspect ratio.
    • Stories: it shows a stories carousel.
    • RecentlyViewed: it shows a recently viewed carousel.
    • UrlProductCarousel: it shows a UrlProductCarousel.
  • Countdown:
    • Countdown Timer: it shows a countdown timer and a title. The countdown timer can be displayed in the specific formats: "dd:hh:mm:ss" ("Days:Hours:Minutes:Seconds"), "hh:mm:ss"("Hours:Minutes:Seconds") and "mm:ss" ("Minutes:Seconds").

DynamicModifiers

DynamicComponents support DynamicModifier, modifiers that change DynamicComponents and are supported by all DynamicComponents. These are similar to Compose modifiers and they are mapped into Compose modifiers on the presentation layer. These are the supported modifiers:

  • Padding: it applies padding
  • Accessibility: it adds a content description.

Dynamic Action

Dynamic content SDK can execute different UI actions called DynamicAction. These are the supported DynamicAction:

  • JavaScript: it executes a JavaScript code in a WebView. The JavaScript has access to the dynamic context via window.poqContext. The script can emit DynamicActions via the JavaScript Bridge method poq.action(action: String). There is a single WebView per screen and its lifecycle is tied to the screen ViewModel one, so all the scripts within a screen are executed on the same shared WebView.
  • Loading: it shows/removes the loading as update screen
  • Log: it logs the message with the severity level provided.
  • Navigation
    • DeepLink: it navigates using a DeepLink.
    • CloseScreen: it closes the current screen.
    • CloseFeature: it closes the current activity, including all its fragments.
    • OpenContent: it opens a DynamicPage, if preserve context is true, it will be opened on the current DynamicContentPageActivity.
  • Snackbar: it shows a snackbar with the message provided.
  • Suspend
    • SubmitDynamicContext: it submits the DynamicContext to BE.
    • Ecommerce
      • Cart
        • Add: it adds the variant id to cart
        • Update: it updates the cart item
        • AddVoucher: it adds the voucher code to the cart
        • DeleteVoucher: it deletes the voucher from the cart
      • Wishlist
        • Add: it adds the product to the wishlist
        • Remove: it deletes the product from the wishlist
  • TrackEvent: it tracks the received analytic event.
  • UpdateComponent: it updates a DynamicComponent with the new values received.
  • UpdateDynamicContext: it sets the received values to the DynamicContext.