Shimoku docs
  • 🚀QuickStart
    • Installation & Setup
    • Minimal APP example
    • Extended Example
    • Templates & tutorials
  • 🤖Artificial Intelligence
    • Classification
      • Train Classification
        • Train Classification Outputs
      • Predict Classification
        • Predict Classification Outputs
    • Generate Insights
      • Generate Insights Outputs
  • 🛠️Building Web App
    • Environment
      • Overview
      • Environment Variables
    • Management
      • Managing Universes
      • Managing Workspaces
      • Managing Boards
    • Menu
      • Changing the Menu Path
      • Updating the Menu Path
      • Deleting the Menu Path
    • Grid
      • Using the Grid
    • Theming
      • Colors Usage
    • Actions
    • Modals
    • IO
  • 💡Elements
    • Summary
    • Charts
      • Table
        • Buttons Column
        • Filters
        • Search bars
        • Colored labels
      • HTML
        • Raw HTML
        • Beautiful Titles
        • Background Indicators
        • Click to New Tab
        • Box With Button
        • Panel
      • Indicators
        • Indicator
        • Grouped Indicators
        • Vertical Indicators
        • Color by Value
        • Gauge Indicator
        • Indicators with Header
      • Scatter Charts
        • Scatter
        • Scatter with Effect
      • Line Charts
        • Line
        • Predictive Line
        • Segmented Line
        • Marked Line
        • Line With Confidence Area
        • Top Bottom Line Charts
        • Summary Line
      • Area Charts
        • Area
        • Stacked Area
        • Segmented Area
        • Top Bottom Area Charts
      • Bar Charts
        • Bar
        • Stacked Bar
        • Horizontal Bar
        • Stacked Horizontal Bar
        • Zero Centered Bar
      • Pie Charts
        • Pie
        • Doughnut
        • Rose
      • Gauge Charts
        • Shimoku Gauge
        • Speed Gauge
      • Input forms
        • Group chained Inputs
        • List input search
        • Conditional inputs
        • Audio input
        • Drag & Drop
      • Line and Bar
      • Waterfall
      • Annotated Chart
      • Heatmap
      • Radar
      • Sunburst
      • Tree
      • Treemap
      • Sankey Diagram
      • Funnel chart
      • iFrame
    • Composite Template Charts
      • Infographics text bubble
      • Chart and Modal Button
      • Chart and Indicators
    • Data Sets
      • Data Set Filters
    • Create your own charts
      • Free Echarts
      • Bento box
    • Features & Navigation
      • Tabs
      • History navigation & Breadcrumb
  • 🔍Advanced usage
    • CLI
    • Workflow Triggers
    • Code Generation
  • 🌍Cloud & Community
    • Shimoku Cloud
    • Shared links
    • Handling Workspaces & Users
      • User authentication
      • Inviting users
      • Creating users
      • Users with multi-workspace access
  • 🌐Releases
    • 2024
      • v.2.6
      • v.2.5
      • v.2.4
      • v.2.3
        • v.2.3.1
      • v.2.2
        • v.2.2.3
        • v.2.2.2
        • v.2.2.1
      • v.2.1
        • v.2.1.2
        • v.2.1.1
      • v.2.0
        • v.2.0.(1..4)
      • v.1.6
        • v.1.6.1
      • v.1.5
    • 2023
      • v.1.4
        • v.1.4.1
        • v.1.4.2
      • v.1.3
      • v.1.2
        • v.1.2.1
      • v.1.1
        • v.1.1.1
      • v.1.0
        • v.1.0.2
        • v.1.0.1
      • v.0.20
      • v.0.19
      • v.0.18
      • v.0.17
        • v.0.17.1
      • v.0.16
        • v.0.16.3
        • v.0.16.2
        • v.0.16.1
      • v.0.15
      • v.0.14
    • 2022
      • v.0.13
        • v.0.13.3
      • v.0.12
      • v.0.11
      • v.0.10
        • v.0.10.4
        • v.0.10.3
        • v.0.10.1
      • v.0.9
      • v.0.8
      • v.0.7
        • v.0.7.1
      • v.0.6
      • v.0.5
      • v.0.4
      • v.0.3
        • v0.3.2
        • v0.3.1
      • v.0.2
Powered by GitBook
On this page

Was this helpful?

  1. Building Web App

Modals

Pop-up navigation

The modal component is a type of container component that allows you to include other component inside of it, much like a Tabs component. When a Modal component is opened, it appears as a pop-up window that overlays the current page. This component type is useful for navigating between different components or for drilling down into specific insights.

Modal components are often used in situations where users need to perform complex actions or view large amounts of data. For example, a Modal component might be used to display a detailed breakdown of a particular product, with the ability to drill down into individual components such as sales by region or by customer.

To create a modal and include a group of components inside of it the function s.plt.set_modal has to be used, this function will include all components defined after that call into the defined modal and it will stop including components after executing s.plt.pop_out_of_modal.

Tabs can be included inside of a modal but modals can not be included in a modal.

The modal has a number of properties that can be set when creating them, the function s.plt.set_modal has the following parameters:

set_modal(
    modal_name: str, 
    width: Optional[int] = None,            # Horizontal percentage of the screen
    height: Optional[int] = None,           # Vertical percentage of the screen
    open_by_default: Optional[bool] = None  # Opens the modal when clicking the menu
)

Another way to open the modal is by a button that triggers the event, the function to use is s.plt.modal_button. It has mostly the same parameters of the button function but is dedicated to opening a modal:

s.plt.modal_button(
    label: str, order: int, modal: str,
    rows_size: Optional[int] = 1, cols_size: int = 2,
    align: Optional[str] = 'stretch', padding: Optional[str] = None,
)

Input forms also have the option to open a modal when clicking the send button:

s.plt.input_form(
    options: Dict, order: int, padding: Optional[str] = None,
    rows_size: Optional[int] = None, cols_size: Optional[int] = None,
    modal: Optional[str] = None,  # use this for opening a modal 
    activity_id: Optional[str] = None,
    activity_name: Optional[str] = None, 
    on_submit_events: Optional[List[Dict]] = None
)

The next example shows how to include a normal component to a modal as well as a tabs group, and how to create a button to open that modal:

s.set_board('Modal Test Board')
s.set_menu_path('Modal Test')
s.plt.set_modal(modal_name='Test modal', open_by_default=True, width=90, height=90)

modal_header = s.html_components.create_h1_title_with_modal(
    title='Modal title', subtitle='Modal subtitle',
    background_color='var(--chart-C5)'
)
s.plt.html(html=modal_header, order=0)

s.plt.set_tabs_index(tabs_index=('Test', 'Tab 1'), order=1)
s.plt.html(html=modal_header, order=0)

data_ = [
    {'date': dt.date(2021, 1, 1), 'x': 5, 'y': 5, 'filtA': 'A', 'filtB': 'Z', 'name': 'Ana'},
    {'date': dt.date(2021, 1, 2), 'x': 6, 'y': 5, 'filtA': 'B', 'filtB': 'Z', 'name': 'Laura'},
    {'date': dt.date(2021, 1, 3), 'x': 4, 'y': 5, 'filtA': 'A', 'filtB': 'W', 'name': 'Audrey'},
    {'date': dt.date(2021, 1, 4), 'x': 7, 'y': 5, 'filtA': 'B', 'filtB': 'W', 'name': 'Jose'},
    {'date': dt.date(2021, 1, 5), 'x': 3, 'y': 5, 'filtA': 'A', 'filtB': 'Z', 'name': 'Jorge'},
]

s.plt.table(
    title="Test-table",
    data=data_,
    order=2,
)
s.plt.pop_out_of_tabs_group() 
s.plt.pop_out_of_modal()

s.plt.modal_button(order=0, modal='Test modal', label='Open modal')
PreviousActionsNextIO

Last updated 1 year ago

Was this helpful?

🛠️
Modal closed
Modal opened