JavascriptApiDemo.xml

JavascriptApiDemo.xml

<apex:page>
    <apex:form>
        <!-- Please replace the following bookId/sheetId attribute values to the values of from book/sheet setting dialog -->
        <apex:pageBlock title="Accounts">
            <msmxSheet:SheetView id="comp-01"
                bookId="a002800001O6vOpAAJ"
                sheetId="s1"
                width="100%"
                height="300px"
            />
         </apex:pageBlock>
         <!-- You need to create a filter for `Account ID` field, with the value of "${params.AccountId}" -->
         <apex:pageBlock title="Opportunities">
            <msmxSheet:SheetView id="comp-02"
                bookId="a002800001O6vOpAAJ"
                sheetId="s2"
                width="100%"
                height="300px"
            />
         </apex:pageBlock>
    </apex:form>
    <script>
    // When records are loaded in the sheet or selection of records are changed, update the `AccountId` parameter from passed records' IDs.
    function handleRecords(params) {
       console.log('params =>', params);
       var accountIds = params.records.map(function(record){ return record.$id; });
       MsmxSheet.updateApplicationParameter({ AccountId: accountIds });
    }
    // When a cell is focused, get ID of the record and update the `AccountId` parameter
    function handleFocus(params) {
       console.log('onFocusCell =>', params);
       var accountIds = [params.cell.recordId];
       MsmxSheet.updateApplicationParameter({ AccountId: accountIds });
    }
    // Subscribing "Accounts" sheet
    // When completed the record loading
    MsmxSheet.subscribeComponentEvent('comp-01', 'a002800001O6vOpAAJ/s1', 'loadComplete', handleRecords);
    // When selection changed by checking record selection checkbox
    MsmxSheet.subscribeComponentEvent('comp-01', 'a002800001O6vOpAAJ/s1', 'selectRecords', handleRecords);
    // When a cell is focused
    MsmxSheet.subscribeComponentEvent('comp-01', 'a002800001O6vOpAAJ/s1', 'focusCell', handleFocus);
    </script>
</apex:page>

To create this demo, you need to create a book with sheets of "Account" and "Opportunity" object.

1. Click "New Book" button, input "Account/Opportunity" in the book name field, and select Account object as a data source. New book will be created with one sheet tab named "Account".
2. Click "New Sheet" button on the right side of the tab of the created book, select Opportunity object. A sheet named "Opportunity" will appear on the next of the "Account" sheet.
3. In the "Opportunity" sheet, select "Add Columns" from the right-most column header menu, and add a column with field "Account ID".
4. Select "Filter" from the column header menu of the newly added "Account ID" column, and set the value of "${params.AccountId}" in the filter value input.
5. Open the setting of "Account" sheet, copy the book ID information.
6. Create a Visualforce page with above content, replace all bookID value to the copied book ID.

https://www.youtube.com/watch?v=xxMh12u8ATY