diff --git a/site/sigmaguides/src/10_2024_first_friday_features/10_2024_first_friday_features.md b/site/sigmaguides/src/10_2024_first_friday_features/10_2024_first_friday_features.md new file mode 100644 index 00000000..e8104687 --- /dev/null +++ b/site/sigmaguides/src/10_2024_first_friday_features/10_2024_first_friday_features.md @@ -0,0 +1,298 @@ +author: pballai +id: 10_2024_first_friday_features +summary: 10_2024_first_friday_features +categories: Administration +environments: web +status: Published +feedback link: https://github.com/sigmacomputing/sigmaquickstarts/issues +tags: first_friday_features +lastUpdated: 2024-11-01 + +# (10-2024) October + + +## Overview +Duration: 5 + +This QuickStart lists all the new and public beta features released, as well as bugs fixed in October 2024. + +It is summary in nature, and you should refer to the specific Sigma documentation links provided for more information. + +**Public beta features will carry the section text "Beta".** + +All other features are considered released (**GA** or generally available). + +Sigma actually has feature and bug fix releases weekly, and high-priority bug fixes on demand. We felt it was best to keep these QuickStarts to a summary of the previous month for your convenience. + +New first Friday features QuickStarts will be published on the first Friday of each month, and will include information for the previous month. + +Features carrying the are customer favorites! + + + + +## Actions +Duration: 5 + +### Use actions to insert rows into input tables (GA) +The `Insert row action` to insert a row into an input table based on a user’s interaction with another workbook element is now **GA.** + +The feature can be found here: + + + +For more information about actions in Sigma, see [Intro to actions.](https://help.sigmacomputing.com/docs/intro-to-actions) + +### Use workbook actions to set a date range control +The date range control is now a valid target for workbook actions that target controls. + +There are many possibilities with this new action. + +For example, a segmented control can be used to allow users to easily click on common date ranges. This saves time for the user, and keeps them focused on the data: + + + + + + +## Administration +Duration: 20 + +### Updated and new permissions for exports +Export permissions are now more granular. The `Download `or `Send Now` permission is now two permissions, `Download` and `Export to email`: + + + +The functionality managed by these permissions has not changed, and existing account types have been migrated to use the new permissions. + +In addition, the ability to have an export run as the recipient is managed by a new permission, `Run exports as recipient.` + +For more information, see [License and account type overview.](https://help.sigmacomputing.com/docs/license-and-account-type-overview) + + + + + +## API +Duration: 20 + +### New API rate limit +The `v2/auth/toke`n endpoint is now rate limited to **one request per second.** + +For more information, see [Get started with the Sigma REST API.](https://help.sigmacomputing.com/reference/get-started-sigma-api#api-limits) + +### New parameter for Tag a workbook endpoint +The [Tag a workbook](https://help.sigmacomputing.com/reference/tagworkbook) (POST v2/workbooks/tag) endpoint now supports the `isDefault` parameter. + +If you want users that only have access to tagged versions of the document to open this tagged version by default, set `isDefault` to `true`. + + + + +## Bug Fixes +Duration: 20 + +**1:** When a workbook action is configured to set a control value on click in a visualization element, clicking on the white space outside the chart now clears the control value as expected. + +**2:** Workbook actions triggered from interactions with tables which have columns that either do not have a type or an error type now run as expected. + +**3:** When users send a request to their admins for a tag to be applied to their workbook, the resulting email notifications now use custom branding settings configured for the organization. + +**4:** Copying a single element with a configured action or clicking Copy page on a workbook page containing actions now copies action configurations between elements on the page. + +**5:** Theme fonts are now applied to all embed modal views. + +**6:** The Get a team API endpoint now returns an error message when trying to retrieve an unexpected team. + +**7:** Users can now export from embeds authenticated with client ID and secret when eval_connection_id is set. + +**8:** When including a PNG file in an scheduled or ad hoc email export, the resulting image now uses the full width of the email body. + +**9:** Swapping data sources when promoting a workbook from one tag to another tag now works as expected. + +**10:** When creating a dynamic title, the type ahead suggestions in the formula bar in the overlay now include the available table columns as well as controls. + +**11:** When responsive height is enabled in an embedded object, opening a modal in the embedded content now displays the modal at the current scroll position. + +**12:** When using the embed sandbox UI in an organization with a high number of teams, the left navigation now loads teams progressively on scroll without throwing a RESOURCE_EXHAUSTED error. + +**13:** When you specify a text alignment for a row header or column header, all header values are aligned instead of the lowest level header. + + + + +## Embedding +Duration: 20 + +### Improved data source selection UI in embeds +Select data sources for workbook elements using a new popover UI. + +With the new experience, you can search for data sources, review a list of suggested sources, and preview data sources. Preview a data source to review the source data and choose specific columns to apply to the element. + +For example: + + + +This allows an embed user (with the appropriate permission) to access the new experience. + + + +For more information, see [Create a data element.](https://help.sigmacomputing.com/docs/create-a-data-element) + +### New inbound events in embeds +Use two new inbound events, `workbook:bookmark:delete` and `workbook:bookmark:select` to display, clear, or delete bookmarks. + +For more information, see [Implement inbound and outbound events in embeds.](https://help.sigmacomputing.com/docs/inbound-and-outbound-events-in-embeds) + +There is also a [QuickStart that covers eventing in Sigma embeds.](https://quickstarts.sigmacomputing.com/guide/embedding_07_events/index.html?index=..%2F..index#0) + + + + +## Functions / Calculations +Duration: 20 + +### Create time series forecasts (Beta) +In a Sigma workbook, you can use `historical time series data` to predict and visualize future values and trends, leveraging [Snowflake’s forecasting ML function](https://docs.snowflake.com/en/user-guide/ml-functions/forecasting). + +Forecasting employs a machine learning algorithm to predict future numeric data based on historical time series data. A common use case is to forecast sales by item for the next two weeks. + +No prior SQL knowledge us required to make this work. + +For more information, see [Create time series forecasts (Beta).](https://help.sigmacomputing.com/docs/create-time-series-forecasts) + + + + +## Infrastructure +Duration: 20 + +### Sigma now supports Azure Western Europe region +Sigma is now deployed in Azure West Europe in compliance with [EU GDPR.](https://commission.europa.eu/law/law-topic/data-protection/data-protection-eu_en) + +Located in the `Netherlands`, this deployment gives customers in the EU more control over data storage while enabling compliance with internal policies and external data residency requirements. + + + + +## New QuickStarts in October +Duration: 20 + +[Discounted cash flow use case:](https://quickstarts.sigmacomputing.com/guide/use_cases_finance_discounted_cash_flow/index.html?index=..%2F..index#0) + +This QuickStart describes and demonstrations how to handle a discounted cash flow (DCF) in Sigma. DCF is a common financial analysis that values some type of asset over a period of time. More simply put, it allows someone to understand how much future money is worth in today's terms. + +An example of what is built is shown below: + + + + + + +## Visualizations +Duration: 5 + +### Bars in combo charts support color by category (Beta) +If your combo chart includes a bar chart, you can add a column to split the color of the bar series by category. + +For example: + + + +For more information, see [Configure a chart color by category. (Beta)](https://help.sigmacomputing.com/docs/combo-charts#configure-a-chart-color-by-category-beta) + +### Cartesian charts support trellis by series (Beta) +If your bar, line, area, or scatter chart has multiple series, you can create a trellis chart for each series. + +**This approach provides several advantages:** + + +For example: + + + +For more information, see [Create a trellis chart with multiple series. (Beta)](https://help.sigmacomputing.com/docs/create-and-format-trellis-charts#create-a-trellis-chart-with-multiple-series-beta) + + + + +## Workbooks +Duration: 20 + +### Export any supported format to Google Drive +You can now export one or more workbook elements, workbook pages, or an entire workbook to a new folder in Google Drive. + +Additional file format types are now supported, such as `PDF` and `PNG.` + +The current list of supported types are: + + + +For more information, see [Send or schedule workbook exports for details on supported file types.](https://help.sigmacomputing.com/docs/send-or-schedule-workbook-exports) + +### Improved pivot table performance +Pivot tables are no longer limited to 100,000 points of data. + +In addition, pivot table rows support infinite scroll! + +### Restore a workbook to a previous change +You can now restore a workbook to a previous change in the edit history for a draft or previously published version. + +This can be really useful if something you are working on stopped working and you are not sure what change caused the issue. Now you can quickly revert versions to see what changed caused the issue. + +For example: + + + +For more details, see [Workbook versions and version history]https://help.sigmacomputing.com/docs/workbook-versions-and-version-history) + +### Updated file names for scheduled element exports +For scheduled exports of elements that use **dynamic text in the title,** the file name now reflects the value of the dynamic text when the export was performed. + + + + +## Additional Information +Duration: 20 + +**Additional Resource Links** + +[Blog](https://www.sigmacomputing.com/blog/)
+[Community](https://community.sigmacomputing.com/)
+[Help Center](https://help.sigmacomputing.com/hc/en-us)
+[QuickStarts](https://quickstarts.sigmacomputing.com/)
+ + +Be sure to check out all the latest developments at [Sigma's First Friday Feature page!](https://quickstarts.sigmacomputing.com/firstfridayfeatures/) +
+ +[](https://twitter.com/sigmacomputing)  +[](https://www.linkedin.com/company/sigmacomputing)  +[](https://www.facebook.com/sigmacomputing) + + + + + diff --git a/site/sigmaguides/src/10_2024_first_friday_features/_shared_assets/Sigma_Footer.png b/site/sigmaguides/src/10_2024_first_friday_features/_shared_assets/Sigma_Footer.png new file mode 100644 index 00000000..df51d771 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/_shared_assets/Sigma_Footer.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/datarange.gif b/site/sigmaguides/src/10_2024_first_friday_features/assets/datarange.gif new file mode 100644 index 00000000..143c154a Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/datarange.gif differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/facebook.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/facebook.png new file mode 100644 index 00000000..fa3f0e02 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/facebook.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_1.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_1.png new file mode 100644 index 00000000..2c050354 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_1.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_2.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_2.png new file mode 100644 index 00000000..f5477883 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_2.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_3.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_3.png new file mode 100644 index 00000000..7763f268 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_3.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_4.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_4.png new file mode 100644 index 00000000..b623b24a Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_4.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_5.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_5.png new file mode 100644 index 00000000..8c20f617 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_5.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_7.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_7.png new file mode 100644 index 00000000..0814d105 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_7.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_8.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_8.png new file mode 100644 index 00000000..7cf1f637 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_8.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_9.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_9.png new file mode 100644 index 00000000..33b0225f Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/fff_10_2024_9.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/heart_icon.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/heart_icon.png new file mode 100644 index 00000000..bff9ea90 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/heart_icon.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/horizonalline.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/horizonalline.png new file mode 100644 index 00000000..7c49d872 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/horizonalline.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/linkedin.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/linkedin.png new file mode 100644 index 00000000..d1a0636d Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/linkedin.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/sigma_footer.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/sigma_footer.png new file mode 100644 index 00000000..df51d771 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/sigma_footer.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/twitter.png b/site/sigmaguides/src/10_2024_first_friday_features/assets/twitter.png new file mode 100644 index 00000000..5a827d72 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/twitter.png differ diff --git a/site/sigmaguides/src/10_2024_first_friday_features/assets/versions.gif b/site/sigmaguides/src/10_2024_first_friday_features/assets/versions.gif new file mode 100644 index 00000000..af2e98d2 Binary files /dev/null and b/site/sigmaguides/src/10_2024_first_friday_features/assets/versions.gif differ diff --git a/site/sigmaguides/src/Fundamentals 1: Getting Around_v2/Fundamentals 1: Getting Around.md b/site/sigmaguides/src/Fundamentals 1: Getting Around_v2/Fundamentals 1: Getting Around.md index 83b550d1..3a464e4d 100644 --- a/site/sigmaguides/src/Fundamentals 1: Getting Around_v2/Fundamentals 1: Getting Around.md +++ b/site/sigmaguides/src/Fundamentals 1: Getting Around_v2/Fundamentals 1: Getting Around.md @@ -174,7 +174,7 @@ Once you open a different page, you may notice the back arrow next to the Sigma IMPORTANT:
The second thing to remember is that we built Sigma from day one on a modern cloud architecture. This allows us to add new functionality very quickly! -If at anytime you notice an item labeled **BETA**, that means that the feature is mature enough to be included for all customers to evaluate while we finalize it's release. +If at anytime you notice an item labeled **BETA**, that means that the feature is mature enough to be included for all customers to evaluate while we finalize its release. For example, at the time of this QuickStart, data models carried the beta tag: @@ -568,7 +568,7 @@ There are three default account types: `Lite`, `Essential` and `Pro`.
  • Pro: allows the original workbook to be altered as if they were the owner.
    • -As an `administrator`, we can the default account types by navigating to `Administration` > `Account Types`. +As an `administrator`, we can see these default account types by navigating to `Administration` > `Account Types`. Here we see the three default types, description and can also create a new custom account type: diff --git a/site/sigmaguides/src/Fundamentals 2: Working with Tables-v2/Fundamentals 2: Working with Tables.md b/site/sigmaguides/src/Fundamentals 2: Working with Tables-v2/Fundamentals 2: Working with Tables.md index 954ae62f..5ad1dadb 100644 --- a/site/sigmaguides/src/Fundamentals 2: Working with Tables-v2/Fundamentals 2: Working with Tables.md +++ b/site/sigmaguides/src/Fundamentals 2: Working with Tables-v2/Fundamentals 2: Working with Tables.md @@ -200,7 +200,7 @@ Your table should now look similar to this: NOTE:
    Negative values for Profit and Profit Margin indicates items sold at a loss. -Some of these functions have been pretty easy, but Sigma is capable of performing the most commonly used functions available in excel/google sheets or SQL. +Some of these functions have been pretty easy, but Sigma is capable of performing the most commonly used functions available in Excel/Google Sheets or SQL. We will get into some more advanced functions later, but you can always check out the complete list by clicking the `Help` button in the lower right hand corner and selecting [Function Index](https://help.sigmacomputing.com/docs/popular-functions) diff --git a/site/sigmaguides/src/Fundamentals 4: Working with Pivot Tables-v2/Fundamentals 4: Working with Pivot Tables.md b/site/sigmaguides/src/Fundamentals 4: Working with Pivot Tables-v2/Fundamentals 4: Working with Pivot Tables.md index 3066fb6b..6506d079 100644 --- a/site/sigmaguides/src/Fundamentals 4: Working with Pivot Tables-v2/Fundamentals 4: Working with Pivot Tables.md +++ b/site/sigmaguides/src/Fundamentals 4: Working with Pivot Tables-v2/Fundamentals 4: Working with Pivot Tables.md @@ -121,7 +121,7 @@ DateTrunc("year", [Date]) -Sigma has also provided all the most common functions (ie: write the function for you!) as menu options off of a column, so you could have just applied that too: +Sigma has also provided all the most common functions (i.e., write the function for you!) as menu options off of a column, so you could have just applied that too: diff --git a/site/sigmaguides/src/Fundamentals 6: Controls-v2/fundamentals_6_controls_v2.md b/site/sigmaguides/src/Fundamentals 6: Controls-v2/fundamentals_6_controls_v2.md index 4442f42a..a55d42e8 100644 --- a/site/sigmaguides/src/Fundamentals 6: Controls-v2/fundamentals_6_controls_v2.md +++ b/site/sigmaguides/src/Fundamentals 6: Controls-v2/fundamentals_6_controls_v2.md @@ -164,7 +164,7 @@ We checked and found there are some orders sold a big losses, so we set the mini Also set the `Control ID` for `Profit` to `profit-slider`. Now adjust the `Profit` slider to be around $6500. These are are target high-value customers: @@ -449,7 +449,7 @@ Add a `Table` to the page, using the `PLUGS_DATA` table on the `DATA` page as th For this exercise, lets reduce the available data down so that refresh is as fast as possible. @@ -232,20 +244,13 @@ In the left sidebar menu use Quick Find to search for `Visualforce` and select ` - Click `Save`: Test your work by `editing the Visualforce Page` again and `clicking Preview`: @@ -288,7 +293,7 @@ We can then `select SigmaSales` from the right side menu as shown: We will want to set the `Height to 800` so that the Component is taller on the page: ![Alt text](assets/sf16.png) - +embe Click `Save`. Navigate back to the Sales homepage (or the page where you decided to embed) and see the results: @@ -298,6 +303,248 @@ Navigate back to the Sales homepage (or the page where you decided to embed) and ![Footer](assets/sigma_footer.png) +## Passing Values to Sigma +Duration: 5 + +It is often useful to enhance the level of interactivity between Salesforce and Sigma by passing values to Sigma when a user clicks a value in Salesforce. + +For example, a user viewing an account list in Salesforce may want to select a specific account and have Sigma filter the embedded data to display information relevant to that account only. + + + +### Example: Salesforce AccountID +Lets use the example of a Salesforce user clicking on an opportunity and passing that unique `AccountID` to Sigma, where it will show the value in a workbook page. + +The revised code blocks are provided below, with comments on what has been added. + +The previous version was simple, with no dynamic components or interaction with Salesforce account data. It just displayed a Sigma embed in a static manner, without specific account-based customization. + +Replacing the code with the following sections will providing an example of passing a value directly to a specific Sigma dashboard control from within Salesforce. + +The Sigma control would then be used to filter the data displayed in the Sigma embed. + +### Apex Class +The revised code allows dynamic account selection, passing the selected `accountId` to Sigma and displaying it within Sigma using a specified control. + +Major changes are: + +**1: Account Selection:** +- The revised code queries a list of accounts from Salesforce, presenting them as selectable options. +- A selected account’s Id is stored in `embed_account` and used to dynamically update the Sigma embed URL. + +**2: Dynamic URL Generation with Control ID:** +- Instead of passing static session parameters, the revised URL includes the selected accountId using Sigma’s control ID format; `SF_AccountID`. +- This enables Sigma to display specific data or text related to the selected account. + +**3: Improved Debugging and Default Values:** +- Added debug statements to trace variable states. +- Initialized `selectedAccountId` with a default placeholder text ("Select an account to show") for a clear indication of the initial state. + + + +Here is the revised Apex class code, so we can just replace the existing class code in total and save after replacement. + +Make sure to update the `client_ID` an `secret` values in this code: + +```code +public class SigmaEmbedClass { + private string client_id = 'YOUR SIGMA CLIENT_ID'; + private string secret = 'YOUR SIGMA SECRET'; + public string embed_path { get; set; } + public string embed_user { get; set; } + public string embed_account { get; set; } + public String selectedAccountId { get; set; } + public List accounts { get; set; } + + public SigmaEmbedClass() { + accounts = [SELECT Id, Name FROM Account LIMIT 10]; + // Set default placeholder text for the initial load + selectedAccountId = 'Select an account to show'; + System.debug('Initial selectedAccountId set to: ' + selectedAccountId); + } + + public PageReference selectAccount() { + System.debug('selectAccount() called'); + System.debug('selectedAccountId before assignment: ' + selectedAccountId); + + // Update embed_account with the selected account ID when an account is chosen + embed_account = selectedAccountId; + + System.debug('embed_account after assignment in selectAccount: ' + embed_account); + return null; + } + + private String generateRandomString(Integer len) { + final String chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + String randStr = ''; + while (randStr.length() < len) { + Integer idx = Math.mod(Math.abs(Crypto.getRandomInteger()), chars.length()); + randStr += chars.substring(idx, idx + 1); + } + return randStr; + } +public String getGenerateIframeUrl() { + System.debug('getGenerateIframeUrl() called'); + + string url = this.embed_path + '?'; + url += ':nonce=' + generateRandomString(16); + url += '&:allow_export=true'; + url += '&:time=' + json.serialize(datetime.now().getTime()/1000); + url += '&:session_length=86400'; + url += '&:mode=explore'; + url += '&:external_user_id=' + EncodingUtil.urlEncode(this.embed_user, 'UTF-8'); + + // Pass the account ID to the control ID in Sigma + String controlId = 'SF_AccountID'; // Replace with the actual control ID + url += '&' + EncodingUtil.urlEncode(controlId, 'UTF-8') + '=' + EncodingUtil.urlEncode(this.embed_account, 'UTF-8').replace('+', '%20'); + + url += '&:client_id=' + this.client_id; + url += '&:signature=' + EncodingUtil.convertToHex(Crypto.generateMac('HMacSHA256', Blob.valueOf(url), Blob.valueOf(this.secret))); + + System.debug('Generated URL with Control ID: ' + url); + return url; + } +} +``` + +`Save` the changes. Do not use `Quick Save` for this step. + +### Visualforce Component +This revised component code now dynamically passes the selected `accountId` from Salesforce to Sigma, allowing Sigma to display content based on that account selection. + +Major changes are: + +**1: Dynamic Account Passing:** +- The embedAccount attribute is now required, but its purpose has changed significantly: it directly links to embed_account in the `SigmaEmbedClass`, which holds the dynamically selected account ID. + +**2: URL Construction with Dynamic Account Control ID::** +- The `generateIframeUrl` method in `SigmaEmbedClass` now dynamically incorporates the selected `accountId` via a specified control ID ("SF_AccountID", which we will create shortly), which allows the Sigma embed to reflect account-specific content. This change means that each time `generateIframeUrl` is called, it reflects the current account selection, rather than a static embed. + +- The revised component leverages the `embedAccount` dynamically to ensure that the URL in the iframe changes based on the user’s selection in real-time, improving interactivity. + +Here is the revised Visualforce component code, so we can just replace the existing `component` code in total and save after replacement: + +```code + + + + + + +``` + +`Quick Save` the changes. + +### Visualforce Page +The revised page list some accounts from Salesforce and dynamically updates the Sigma embed based on the selected account. The Sigma embed will show the selected `Account_ID` passed from Salesforce. + +The Salesforce account clicked will appear in the embed using a Sigma `CONTROL ELEMENT` > `LIST VALUES` control. + +Major changes are: + +**1: Dynamic Account Selection with Command Link:** +- Each account name in the `pageBlockTable` is now paired with a "View in Sigma" link. When a user clicks this link, it triggers the `selectAccount` method in `SigmaEmbedClass`, updating the `selectedAccountId` with the clicked account’s ID. +- The use of `apex:param` within the `commandLink` ensures that the correct `accountId` is passed to the controller, allowing Sigma to receive the specific account ID dynamically. + + +**2: Conditional Display of Sigma Embed:** +- A Salesforce `outputPanel` with embedPanel ID wraps the Sigma embed section, allowing it to be re-rendered dynamically when the selected account changes. +- Conditional Salesforce `outputText` components are used to show a placeholder message ("Select an account to show") if no account is selected, improving user guidance. +- Once an account is selected, the outputText conditionally displays the `SigmaEmbedComponent`, passing the dynamically updated `selectedAccountId` as `embedAccount.` + +**3: Embedding Sigma with Account-Specific Context:** +- The `SigmaEmbedComponent` in the embed panel now receives the selected `accountId` dynamically, updating the Sigma embed URL to reflect the current account context. +- This dynamic embedding allows Sigma to display data or information specific to the chosen account, providing the desired interactivity. + +Here is the revised Visualforce page code, so we can just replace the existing page code in total and save after replacement: + +```code + + + + + + + + + + + + + + + + + +

    Select an account to show

    +     + + + +     +     +     +     +``` + +`Quick Save` the changes. + +## Configuring Sigma + +#### User Attribute +In Sigma, navigate to `Administration` > `User Attributes` and click the `Create Attribute` button. + +Name the new attribute `sfaccount`. + +Assign the new user attribute to the `Sales_Managers` team with a placeholder default value of `0`. + +Click `Save`: + + + +#### Configure Sigma workbook +Navigate back to the `Profit Planning Tool` workbook we used for the embed, place it in `Edit` mode and add a new workbook page. + +On the new page, add a new `UI ELEMENT` > `CONTROLS` > `LIST VALUES.` + +Configure it's properties to be: + + + + + +The `Control_ID` used needs to be `SF_AccountID`. + +`Publish` the workbook. + +Generate a new `Embed path` for the new page only: + + + +Copy this new `Embed path` and use the new url to update the `Visualforce page` code with this new URL: + + + +Save the `Visualforce page` after updating the url. + +### Testing the changes +Click the `Preview` button to see the new Salesforce page render: + + + +For more information on sing controls to filter data in Sigma, see [Intro to control elements](https://help.sigmacomputing.com/docs/intro-to-control-elements#how-controls-work) + +![Footer](assets/sigma_footer.png) + + ## What we've covered Duration: 5 diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png index 9d7bc178..c56cf69c 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png index db86f2df..4371e686 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png index 2644575c..2ad22e3c 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp10a.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp10a.png new file mode 100644 index 00000000..3d5e6640 Binary files /dev/null and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp10a.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png index 9c7d9029..35563bf0 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md index 9aed16bd..3d009082 100644 --- a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md +++ b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md @@ -266,19 +266,19 @@ git config core.sparseCheckout true Specify the folder you want to clone by adding it to the sparse-checkout configuration: ```code -echo "embedding-streamlit/" >> .git/info/sparse-checkout +echo "embedding_signed_URL/streamlit/" >> .git/info/sparse-checkout ``` -At this point, we have run each command and not seen any errors. +At this point, we have run each command and not seen any errors: + + Finally, pull the specified folder from the repository: ```code git pull origin main ``` -After the command runs, click the button to `Open Folder`: - -We can now see the project called `embedding-streamlit`: +We can now see the project called `streamlit`: @@ -361,13 +361,15 @@ We can use these credentials for all embeds, but you may create as many credenti Open the `embedding-streamlit` folder in VSCode and open the `.env` file. -**Make sure to replace the placeholder values with your actual values for the four variables:** +Replace the placeholder values for `EMBED_PATH`, `CLIENT_ID`, `EMBED_SECRET`, `EMAIL` and `EXTERNAL_USER_TEAM` to match your values created earlier. + +For `ACCOUNT_TYPE` use `Pro` for now. After updating `.env` with your values, `save` the file. -Open a new terminal window in VSCode and run the command: +In VSCode terminal run the command: ```code conda activate streamlit ``` diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae16.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae16.png index 3309cd2d..dd6ce25e 100644 Binary files a/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae16.png and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae16.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae17.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae17.png index 47de9ca2..8de323eb 100644 Binary files a/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae17.png and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/ae17.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk14.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk14.png index cb176a52..07c3e037 100644 Binary files a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk14.png and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk14.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk15.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk15.png index 8a433132..c67474f2 100644 Binary files a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk15.png and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk15.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk19a.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk19a.png new file mode 100644 index 00000000..eafbc47b Binary files /dev/null and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk19a.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk26.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk26.png index b27804d1..6ca439f4 100644 Binary files a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk26.png and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk26.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk26a.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk26a.png new file mode 100644 index 00000000..5e178ba0 Binary files /dev/null and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk26a.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk31.png b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk31.png index e5a16c78..84cd92f5 100644 Binary files a/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk31.png and b/site/sigmaguides/src/embedding_15_embed_sdk/assets/sdk31.png differ diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md b/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md index 655d4a70..11360746 100644 --- a/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md +++ b/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md @@ -338,9 +338,7 @@ The results look like this: ![Footer](assets/sigma_footer.png) - ## Start Development Server - We are ready to test the `Embed-SDK` application. Run the following command in terminal: ```code @@ -370,298 +368,23 @@ In the next section will will look at how the embed is configured in code. ## Sample Application Duration: 5 -From the landing page, click the link for the `Sample Application`. - -The sample application has an example of a Sigma embed (provided from a Sigma instance) along with a list of the primary files involved. - -The list of files has tooltips to provide general information but the files themselves are commented to assist you. - - - - +Before we load the `Sample Application`, lets review which files are involved in this sample application. ### Primary source files - There are five files involved in this example embed: - - -```code -# .env -# Sigma Embed Credentials. These two values will need to be changed when using your own Sigma instance to embed content - -# Values from my Sigma instance -EMBED_URL={url path to embed} -EMBED_CLIENT_ID={your client id} -EMBED_SECRET=(your embed secret) -``` - - - -```code -/* utils.tx */ -/* contains utility functions that facilitate the embedding of Sigma dashboards into a web application by generating signed URLs */ - -import { type ClassValue, clsx } from "clsx"; -import { twMerge } from "tailwind-merge"; -import { v4 as uuid } from "uuid"; - -/** - * Merges Tailwind CSS classes conditionally. - * @param inputs - An array of class values to conditionally merge. - * @returns A string of merged class names. - */ -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} - -/** - * Converts an ArrayBuffer to a hex string. - * - Converts the buffer to a byte array. - * - Maps each byte to a two-character hex string. - * @see https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string - */ -export function bufferToHex(buffer: ArrayBuffer) { - return Array.from(new Uint8Array(buffer)) - .map((b) => b.toString(16).padStart(2, "0")) - .join(""); -} - -/** - * Uses the Web Crypto API to create a SHA256 HMAC hex string. - * @param key - The key used for signing. - * @param data - The data to be signed. - * @returns An object containing the hex string of the HMAC signature. - */ -async function simpleHmac({ key, data }: { key: string; data: string }) { - const encoder = new TextEncoder(); - const encodedKey = encoder.encode(key); - const encodedData = encoder.encode(data); - - // Import the key for HMAC signing - const hmacKey = await crypto.subtle.importKey( - "raw", - encodedKey, - { - name: "HMAC", - hash: "SHA-256", - }, - true, - ["sign", "verify"], - ); - - // Sign the data using the imported key - const signature = await crypto.subtle.sign("HMAC", hmacKey, encodedData); - - // Convert the signature to a hex string - const hex = bufferToHex(signature); - - return { hex }; -} - -/** - * Signs a Sigma embed URL with a cryptographic signature. - * @param dashboard - The base URL of the Sigma dashboard or visualization. - * @returns A signed URL with appended query parameters. - */ -export async function signEmbedUrl(dashboard: string): Promise { - const { EMBED_SECRET, EMBED_CLIENT_ID } = process.env; - if (!EMBED_SECRET || !EMBED_CLIENT_ID) { - throw new Error("SIGMA_EMBED_SECRET is not set"); - } - - // Sigma Embed Parameters (normally, these are generated programmatically) - const searchParamsObject = { - ":mode": "userbacked", // mode for secure embedding - ":email": "embed-sdk@sigmacomputing.com", // Email associated with the embedded session - ":external_user_team": "Sales_People", // External team associated with the user - ":account_type": "viewer", // Account type, e.g., viewer or editor - ":nonce": uuid(), // Unique identifier for the session to prevent replay attacks - ":time": `${Math.floor(new Date().getTime() / 1000)}`, // Current timestamp in seconds - ":session_length": "36000", // Session length in seconds (10 hours) - ":client_id": EMBED_CLIENT_ID, // Client ID for authentication - ":external_user_id": "123", // External user ID for tracking purposes - }; - - const searchParams = new URLSearchParams(searchParamsObject); - - // Append search parameters to the base dashboard URL - const urlWithSearchParams = `${dashboard}?${searchParams.toString()}`; - - // Create a cryptographic signature using the embed secret - const SIGNATURE = await simpleHmac({ - key: EMBED_SECRET, - data: urlWithSearchParams, - }); - - // Append the signature to the query parameters - searchParams.append(":signature", SIGNATURE.hex); - - // Construct the final signed URL - const signedUrl = `${dashboard}?${searchParams.toString()}`; - - return signedUrl; -} -``` - - - -```code -// basic-example-wrapper.tsx -// The SignedIframe component is responsible for securely embedding a Sigma Computing dashboard into a React application. -// signEmbedUrl: This function is imported from the Sigma Embed SDK library and is used to generate a signed URL for secure access to a Sigma dashboard. - -// Import the signEmbedUrl function from the utilities module -import { signEmbedUrl } from "@/lib/utils"; -// Import the BasicExample component, which is responsible for rendering the iframe -import BasicExample from "./basic-example-embed"; - -// Define an asynchronous component to sign the URL and render the iframe -export default async function SignedIframe() { - // Get the base URL from the environment variable - const src = process.env.EMBED_URL || ""; // Use the value from the .env file - - try { - // Await the signed URL by passing the base URL to the signEmbedUrl function - const signedSrc = await signEmbedUrl(src); - - // Log the base and signed URLs as output in server-side terminal session - console.log("Signed URL:", signedSrc); - - // Return the BasicExample component with the signed URL as a prop - return ; - } catch (error) { - // Log any errors encountered during signing - console.error("Error signing URL:", error); - return

    Error loading iframe

    ; - } -} -``` -
      -
    • basic-example-embed.tsx: This file is a React component designed to embed a Sigma Computing dashboard using an iframe within a React application.
      • +
    • utils.ts: Defines utility functions and constants, including HMAC signing logic and configuration parameters, to generate a secure, signed URL for embedding the Sigma dashboard.
      • +
    • route.js: Generates a securely signed embed URL for the Sigma dashboard by using HMAC signing and serves it via an API endpoint.
      • +
    • basic-example-wrapper.tsx: Fetches the signed embed URL from the API and conditionally renders the basic-example-embed.tsx component once the URL is retrieved.
      • +
    • basic-example-embed.tsx: Embeds the Sigma dashboard iframe into the React application, using the Sigma SDK’s useSigmaIframe hook to manage loading and error states.
      • +
    • page.mdx: Renders the webpage, SignedIframe, and logs the signed URL for console log display only.
    -```code -// basic-example-embed.tsx -// Utilizes the Sigma Computing Embed SDK to integrate an iframe within a React application. - -"use client"; // Next.js directive to ensure this component runs only on the client-side. - -import React from "react"; -// Import the useSigmaIframe hook from the Sigma Computing React Embed SDK -import { useSigmaIframe } from "@sigmacomputing/react-embed-sdk"; - -// Define the BasicExample component, which receives a 'src' prop for the iframe URL -export default function BasicExample({ src }: { src: string }) { - // Destructure the iframeRef, loading, and error values from the useSigmaIframe hook - const { iframeRef, loading, error } = useSigmaIframe(); - - return ( - // Parent container with full height -
    - {/* Conditional rendering: Display loading text if the iframe is loading */} - {loading &&

    Loading...

    } - {/* Conditional rendering: Display error message if there is an error loading the iframe */} - {error &&

    Error loading iframe

    } - {/* Render the iframe, filling the parent container */} -