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')

Modal closed

Modal opened