You will now create a custom component using the real-time integration scenario that you just created, that will display your table results as a widget to be used on any Salesforce Lightning page.
1. In the Overcast Components section of the Integration Scenario record you just created, select Create Component.
2. Enter a Component name in the Label field (1), and API name in the Developer Name field (2). Select Create Component (3).
3. Select the Preview Object (1) and Preview Record (2), where you would like to display the component for previewing. Select Widget (3) for Preview Component type, and then, select Update (4).
.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kemY4dnF2MjRlcWhnLmNsb3VkZnJvbnQubmV0L3VzZXJmaWxlcy83NDg4LzMyMTM5L2NrZmluZGVyL2ltYWdlcy8yMDIwLTA2LTI1XzE0LTE3LTE5KDEpLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2NTg2NTk0Nn19fV19&Signature=m9AznH5X9uLgHpgWSf-O8UkFkrzhfSw6bNuHS-De9jVH6BSn08Qes922~plFuTM9Gd0MqLVP9EB0Vw2ejd8gEmomUIiMEH3rsiwcYtTZHVSxaPicm1wHlTS5MGCv7C-nrfCbceXXUQkhYADZKoTKDtSV55JarhrT8x6JegQQ4Lwblw2DQ9ZmwBZFYEsNyvo-g9GPt8eQkuQTjZGWRmoD9x827raibV7OXZIQ6D1mrHR0ke6ShmkNwW~qX~L-BPlb2-msv8OY4OA~U8pjKwhktr06ljOigz84f9~f~NkjosQ2GF-KGKCuRT11UG0ze~4hJsPdmQl20RemP5bUzstfYQ__&Key-Pair-Id=K2TK3EG287XSFC)
4. Name your component label: Enter a name to be displayed into the Static label field (1), and select Update preview (2). Check if the component name is updated (3).
Here we set the display to be the widget type, to display the data in easy to read panels.
1. Click on Sections (1), Query Results (2), and Section Settings (3)
.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kemY4dnF2MjRlcWhnLmNsb3VkZnJvbnQubmV0L3VzZXJmaWxlcy83NDg4LzMyMTM5L2NrZmluZGVyL2ltYWdlcy8yMDIwLTA2LTI1XzE2LTU4LTM5KDEpLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2NTg2NTk0Nn19fV19&Signature=Tnj9zi0F5Hvqobe357-6ttncldMEeyYE37ywIm194UMrd65s0ei1CQNFk5NuxuPgJU1bY0v9Z5FIXh~wNQtoZc5mvFFlkxcnhgwRre0VIg3NCbZ~3mDrBeS4AiwYXIv5wHgeV176Vb8PgmOvLh-MzrRmSZiN3G2BqLwo2AEW0g1hOmMoe8TfivcCnDKuFZ1STqn2zyowOJVjllIpi7bDxdAeS3R7mDx3d4D6uGcMXVxurt7VV3bLd-fDnqbiNyYItfl44otkEW4plao5HIWWjc2~k47UnhpwNt3rwqkUax~IT-Muu3CN1PuchouoUhdpKC7nldkqjvPXnLPiEHCUoQ__&Key-Pair-Id=K2TK3EG287XSFC)
2. Under Section Settings, select "Table" for Structure Type (1), "Panel" for Section Type (2), "Tiles" for Display Variant (3), and "6" for Maximum Tiles to Display (4). This determines the number of records to be displayed as tiles.
.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kemY4dnF2MjRlcWhnLmNsb3VkZnJvbnQubmV0L3VzZXJmaWxlcy83NDg4LzMyMTM5L2NrZmluZGVyL2ltYWdlcy8yMDIwLTA2LTI1XzE1LTU5LTE0KDEpLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2NTg2NTk0Nn19fV19&Signature=jtxLafW-ZdUp6rsL8XhB4Ipp98SByrS6a0FQIJGxPCc14zOsrE-E40aSLtr7XlsvbCM~qMeBXprXCeDm2Gma8I1tDlknes9MGTG2BQOm6CtWpm2d5kWkcQuGv9fNn0cJnRDIuQt3LWcV~4WPYw4mi90Bh3uNBDt68b99mvRN1dp0WYZMSxvg4o1R-gW9PK5YZ91dWrMoIJtQgKmlncc96bLADc8bkGjd1JJsjBXxC0VoIfshdRPdY42~C0kw21pZM~XRUgjRTlcBV-LI5tJwA9Qt4xKXTeJLE3cho~oXU7oKwB5pRnRVtkxlpsCpuCSa3gH152JuSf7YrwY97iHQyw__&Key-Pair-Id=K2TK3EG287XSFC)
3. Save your settings (1). Select the funnel to access your filters (2). Set up filters to specify which data you want displayed. In this case, "Country equals JP" will retrieve accounts in Japan (3). Select Update (4).
.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kemY4dnF2MjRlcWhnLmNsb3VkZnJvbnQubmV0L3VzZXJmaWxlcy83NDg4LzMyMTM5L2NrZmluZGVyL2ltYWdlcy8yMDIwLTA2LTI1XzE3LTAwLTM2KDMpLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2NTg2NTk0Nn19fV19&Signature=psYp9jqQRhY9v-Iu95~IWDgXecIGddTeaaBGd66wafckJkZbP~RSGrbNSDdzdkiqQA2gfP1dEIav4suhwtzKH7Q236svKJT-xy2k66TzOeHJKhx3FqPO8z2IETGlhQjpHg5XOSKNpo59bQPkSXgNEaybBmTFeqIpJvDzWB5R1g-tc8CXT5m0RHSK9C0srAQbtvzhpKHzbNEp7WDbSvXdO5JeufpebA1Fzia4LzNJqleyTh4a5cM0-RmruAds3BmnTLoUSF9OFJDv24YPKo63mZxtVj2YZxTqJjnP8-o3aUan0wLXYefNqDswfSDz0Tq7YBx8hYUZ-QdCpCRNxy~JBQ__&Key-Pair-Id=K2TK3EG287XSFC)
4. In Query Results, you will see a maximum of 6 records in the widget that match your filtering.
.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kemY4dnF2MjRlcWhnLmNsb3VkZnJvbnQubmV0L3VzZXJmaWxlcy83NDg4LzMyMTM5L2NrZmluZGVyL2ltYWdlcy8yMDIwLTA2LTI1XzE3LTAzLTI3KDQpLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2NTg2NTk0Nn19fV19&Signature=Sm6e9Q5Y34e94ivNW4QUyQ5xmRV5eu5UHOkeiv7h8npfGNpKJxWZmMokcJzcH6C3m9Kh32pgR84nrnBaLhLLoaXO9LLBscSafMnaTwloH-SGQCZPznucMEs6cTbsmRDtk8l2rdbh1AX~BRb2zYNgJ60hggZvEUWKrMdqNVe0KATN9iCU9-Uh-yEaOHBsUP3OL1XVA~nwAgyVM-1juhN7IfhAFTBwFFd~71G0vDT~X5VNceT5BcjSQ6GHkXjy8Y0e8J6z7EM5Fz9KgnUBmnNB3o6X-cxR3-q5C-WuA0Onu-wVpPpfje6blfNchC9fNajJ~VLINsX6Dj0sbR8wsmnWGA__&Key-Pair-Id=K2TK3EG287XSFC)
5. If you wish to hide certain fields, you can select the blue switch under Fields beside each field to control visibility.
.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kemY4dnF2MjRlcWhnLmNsb3VkZnJvbnQubmV0L3VzZXJmaWxlcy83NDg4LzMyMTM5L2NrZmluZGVyL2ltYWdlcy8yMDIwLTA2LTI1XzE3LTA5LTQ2KDEpLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2NTg2NTk0Nn19fV19&Signature=YC10mu7vfHr2rOROasKxGx5FNkV0YFvKcDnXqmCTWoLdcUjiulyGhcJU4wCodesVFnkhDyyDVS7EBb84TjiPT1xpiJspi81E1NxWvAV-HOZrxTyP~Jlcw7MRBmqYSGAmdIjV9VmBL01Pb4bsLnVa0PS5bSEwZg2KzbE00XdOtJg-KdtLddKyEsQZibQuDPBlxAQ0tQfXzMyFDi1Z32DlPsZy9h8UZEczPpYOBppewT-1xiXtUcGbXb~L06xtlvigjdJ-owU7N9tl-3Uj8pL0n07B11HzNx-73rpzrqPSS8-D-90O8QIZltEYbROTUtsgVxWeBiadJMHN6ba7E0qcPQ__&Key-Pair-Id=K2TK3EG287XSFC)
1. Navigate to the Object you wish to have this component displayed upon and open a record. Select Setup and choose Edit Page from the dropdown menu. In this example, we are using the Account object.
2. Find your custom component. Drag the selected widget until the component box is highlighted green, and release the widget. Adjust them on the page layout to your choosing. Select Save and go back to the object record page by selecting Back.
.png?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9kemY4dnF2MjRlcWhnLmNsb3VkZnJvbnQubmV0L3VzZXJmaWxlcy83NDg4LzMyMTM5L2NrZmluZGVyL2ltYWdlcy8yMDIwLTA2LTI1XzE3LTE1LTQ4KDIpLnBuZyIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTc2NTg2NTk0Nn19fV19&Signature=VUdaCknlbnSUDlZm40jJYPAQ2w0iEFZrIax8CDwq4WynE-owZ5uoJ98MpE9tebdAhOdHKGWO~ZtLoPbByoo80yENpMq9YL9rip20s0vK5mBCyDJIaKfMTBTSF8k1Sbmkfqg5k8TwSL5cP6P8iKAzhCeGnA4iUa1QRkzlTcJuGi-53n8YDNREfErZbhmepD4vE6IuZjJS9zU4ZiO8IC2u3K8prZoGhaZ7mQRilR~fNqWWCg9acZlDJW5vImj1tO~49RnONfpJNuvDpHHRrkM24tSki1WquOefBnjnkU18XL1TOsdZxPMvgYsWbcFi6zHo6lJmUquN1K5Bml3dhCBRug__&Key-Pair-Id=K2TK3EG287XSFC)
3. Your Custom Component will now be visible on your page layout.
Next, you will Create your first data synchronization Integration Scenario.