how we can accomplish showing specific selector ba...
# gooddata-cloud
k
how we can accomplish showing specific selector based on configurations for the client. e.g. if we have a client that is using campaign feature, we show campaign selector(on top of dashboard) based on configurations we would store in the data. So if client does not have feature turned on, we do not show (or hide) that selector. Same thing we want to do it with tabs. Show certain tab based feature/config setting of client. Note - we are using react based embedded analytics. Please let me know if you have any questions. Thank you!
k
Great question! Since you're using the React SDK for embedded analytics, you have the most flexibility here. However, I want to be upfront: the knowledge sources don't explicitly cover hiding/showing dashboard-level selectors (filters) or tabs based on client config — but they do provide enough context to outline the recommended approach. Recommended Approach: Conditional Rendering in the React SDK Since GoodData does not natively support hiding individual dashboard widgets, selectors, or tabs based on data logic at runtime, the cleanest solution is to implement the conditional logic entirely in your application layer. [Community Slack] 1. Conditionally Show/Hide Selectors (Filters on Top of Dashboard) If you're building a custom UI around the embedded
Dashboard
component, you can: 1. Read the client's feature flags from your configuration store (e.g., your
Campaign_Flag
,
Market_Flag
columns). 2. Conditionally render the campaign-related filter/selector component only when the flag is enabled.
Copy code
// Example: Conditionally render a campaign filter selector
const MyEmbeddedDashboard = ({ sellerConfig }) => {
  return (
    <div>
      {sellerConfig.Campaign_Flag === 'Y' && (
        <CampaignFilterSelector /> // Your custom selector component
      )}
      {sellerConfig.Market_Flag === 'Y' && (
        <MarketFilterSelector />
      )}
      <Dashboard dashboard="your-dashboard-id" />
    </div>
  );
};
If the selectors are GoodData's native dashboard filters, you can use the
?hidefilters=filterId
URL parameter (for iframe embeds) to hide specific attribute filters. [Configuration Options] 2. Conditionally Show/Hide Tabs The knowledge sources do not explicitly document a native GoodData feature for showing/hiding dashboard tabs based on client config. The recommended approach here would again be: • Build custom tab navigation in your React app rather than relying on GoodData's native tab UI. • Based on the seller's feature flags, render only the tabs/sections that are relevant. • Each tab can load a different
Dashboard
component or
InsightView
component conditionally.
Copy code
const MyTabbedDashboard = ({ sellerConfig }) => {
  const tabs = [
    { label: 'Overview', dashboardId: 'overview-id', always: true },
    { label: 'Campaign', dashboardId: 'campaign-id', flag: sellerConfig.Campaign_Flag },
    { label: 'Market', dashboardId: 'market-id', flag: sellerConfig.Market_Flag },
  ];

  const visibleTabs = tabs.filter(tab => tab.always || tab.flag === 'Y');

  return (
    <div>
      {/* Render only visible tabs */}
      {visibleTabs.map(tab => (
        <TabButton key={tab.label} label={tab.label} />
      ))}
      {/* Render active tab's dashboard */}
    </div>
  );
};
3. Fetching Feature Flags at Runtime Since your config table is in your data source, you can: • Expose the seller's feature flags via your backend API at login/session time. • Pass them as props into your React components to drive conditional rendering. Summary The React SDK conditional rendering approach is the most scalable and recommended path for your use case, as GoodData does not natively support hiding individual UI elements (selectors, tabs) based on data-driven feature flags. [Community Slack] 👍 0 button 👎 0 button ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups. 👀 Our Support team monitors all messages and will jump in if needed., with interactive elements
j
Hi Krishti, Two clarifications to the answer above, plus something you could try: 1.
?hidefilters=
only applies to iframe embedding — it's a URL parameter of the embedded dashboard route, not something the React SDK Dashboard component picks up. So if you're on the SDK, please ignore that part. 2. The SDK equivalent, if you ever need to hide a native dashboard filter rather than your own selector, is
DashboardAttributeFilterComponentProvider
combined with
HiddenDashboardAttributeFilter
— you decide per filter which component to return, which is where your feature flag could plug in. Two caveats: both are marked alpha in our API docs (not recommended for production yet), and hiding a filter does not disable it — the filter still applies, it's just not visible. So it's a UI control, not a data-access control; for restricting what a client can actually see, UDF/WDF is the right tool. For your case (campaign selector + tabs) the conditional-rendering approach in your own React layer is still what we'd suggest starting with.