ehsky

Overview

The VisibilityObserver component is designed to work within Salesforce Flows to detect when it becomes visible on the screen. When this component appears in or exits the user’s view, it can automatically move the Flow forward, backward, pause, or finish, based on the settings chosen.

Key Features

• Viewport Detection: Tracks when the component enters or leaves the visible area of the screen.
• Flow Navigation: Automatically triggers navigation actions within the Flow (such as “Next” or “Back”) when the component comes into view.
• Customizable Check Interval: Allows you to control how often the component checks its visibility on the screen.

ehsky

BEGIN:VCALENDAR
METHOD:REQUEST
PRODID:Salesforce Marketing Cloud instance of %%member_busname%%
VERSION:2.0
BEGIN:VTIMEZONE
TZID:Central Europe Standard Time
BEGIN:STANDARD
DTSTART:16010101T030000
TZOFFSETFROM:+0200
TZOFFSETTO:+0100

ehsky

{
  "events": [
    {
      "data": {
        "schema": "22g3pL899yc5TkDjhghSCg",
        "payload": {
          "FlowApiName__c": "Account_update_address_details_on_open_quotes",
          "CreatedById": "0050O000007jEAMQA2",
          "RecordId__c": "0013Y00002wZI2MQAW",
          "CreatedDate": "2023-06-27T15:28:33.195Z"

ehsky

<aura:component implements="lightning:homeTemplate" 
  description="Home Page layout. Section 1: left 80% right 20%. Section 2: left and right 50%">
  <aura:attribute name="leftTop" type="Aura.Component[]" />
  <aura:attribute name="rightTop" type="Aura.Component[]" />
  <aura:attribute name="leftBottom" type="Aura.Component[]" />
  <aura:attribute name="rightBottom" type="Aura.Component[]" />
  <div>
    <lightning:layout>
      <lightning:layoutItem size="10" class="slds-m-right_small"> {!v.leftTop} 
      </lightning:layoutItem>

ehsky

How to use

This is an example implementation of the <lightning-input type="file"></lightning-input> that is a less restricive alternative to the LWC component lightning-file-upload.
This component can be used in a Screen Flow, Lightning App Page or a Lightning Record page.

When using it on a lightning page there is added a dynamic event that can be configured by an admin in the Lightning App Builder.

Demo of dynamic interactions

Screen.Recording.2023-01-17.at.00.16.08.mov

ehsky

%%[
var @SK,@lookupde,@lookupvalue, @Owner, @OwnerEmail,@StandardEmail
set @sk = AttributeValue("_subscriberkey")
set @ContactStart = "003"
set @StandardEmail = "yourFallback@emailDomain.com" 


IF INDEXOF(@sk,@ContactStart) > 0 THEN
 SET @lookupDE = "ent.Contact_0"
 SET @lookupvalue = "ContactID"

ehsky

/**
 * Main method that will be called when the script is run
 */
void start() {
  /// Here you input your own logic can code to generate the recordList.
  
  // Example usage:
 
  List<Contact> recordList = [SELECT Id, FirstName, LastName FROM Contact];
  List<String> csvHeaders = new List<String>{ 'Id', 'FirstName', 'LastName' }

ehsky

<script runat="server">
  Platform.Load("Core","1.1.1");
  try{
    function createPassword( len ) {
      var length = (len)?(len):(10);
      var string = "abcdefghijklmnopqrstuvwxyz";
      //to upper 
      var numeric = '0123456789';
      var punctuation = '!#$^&%@*';
      var password = "";

ehsky

// Option 1: Use on plain text filds
IMAGE("https://countryflagsapi.com/png/"&  ShippingCountry ,"Country flag",20,30)

/// Option 2: Custom picklist field with country iso code as values
IMAGE("https://countryflagsapi.com/png/"& text(Country_Code__c),"Country flag",20,30)

ehsky

<!-- CUSTOMER_NAME Profile center by Erlend Stretch Norge -->
<link href="styles" rel="stylesheet"> <!-- Import CUSTOMER_NAME stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style>
     body {
       font-family: "Ubuntu" Fallback, sans-serif;
       color: #161225;
  }
.tooltip {
  position: relative;