.. _custom_texts: Add custom texts ################# Follow these instructions to add custom text to your solution. .. _custom_text_no_code: No-code customization ===================== .. _custom_text_setup_page: Customize the setup page ------------------------- You can add custom text below the **Problem Setup** page's first header. To do so, create a text file in the following path: .. code-block:: xml src\ansys\solutions\\ui\assets\texts\custom_intro.md For example, if you create ``custom_intro.md`` and add the following lines: .. code-block:: text :caption: custom_intro.md This is a custom line of text. This is a second custom line of text. The **Problem Setup** page is then displayed as follows: .. image:: ../img/custom_texts_setup.png :width: 90% .. seealso:: This customization method supports Markdown formatting. For a general guide, see `Basic Syntax `_ in the *The Markdown Guide*. A file named ``sample.md`` has been provided with the exact features that are supported. It also includes support for MathJax functions. .. seealso:: For additional guidance and references on MathJax functions, see the following documentation: * `MathJax Basic: Quick Reference `_ * `MathJax basic tutorial and quick reference `_ Customize other pages --------------------- Customizing other pages in the solution requires some familiarity with Python. For more information, review the following sections. Low-code customization ======================= Customize the setup page ------------------------- If you are familiar with Python, look at the code in the following file: .. code-block:: xml src\ansys\solutions\\ui\pages\problem_setup_page.py The page is defined as a ``div`` component containing a list of inner dash components. The Markdown text is read from the given file and inserted as a nested ``div`` in that list. (If the file doesn't exist, the element is just empty.) .. vale off .. code-block:: python3 :caption: problem_setup_page.py :emphasize-lines: 15 return html.Div( [ # Header html.H1( problem_setup_slice.app_metadata["title"], style={"fontSize": "45px", "fontWeight": "normal", "lineHeight": "1.2"}, ), html.P( problem_setup_slice.app_metadata["description"], style={"fontSize": "25px", "fontWeight": "normal"}, ), html.Hr(className="my-2"), html.Br(), # This is where you can put your custom text get_custom_text("custom_intro.md"), ... ] .. vale on To create your own text blocks, create files in ``ui\assets\texts`` and load them inside the list using the ``get_custom_text(...)`` function, in the same way it's done for ``custom_intro.md``, as shown here: .. code-block:: python3 :caption: problem_setup_page.py return html.Div( [ ..., get_custom_text("your_new_file.md"), ... ] Customize the result files view ------------------------------- You can use a similar approach to add custom text to the **Results Files** tab. For example, look at the following file: .. code-block:: xml src\ansys\solutions\\ui\views\result_files_view.py This view is also defined in the form of a ``div``, as shown here: .. code-block:: python3 :caption: result_files_view.py layout = html.Div( [ extra_message_selected_file, buttons, result_files_table, table_loading_message, spinner, hidden_divs, checkbox_states, ] ) To add your own custom text: #. Create a file in ``ui\assets\texts\``. For example, say you create ``ui\assets\texts\results_text.md`` with the following content: .. code-block:: text :caption: results_text.md This is more custom text. Here is a more detailed explanation about the result files. #. Load it by calling ``get_custom_text(..)``. Following the example, ``get_custom_text("results_text.md")``: .. vale off .. code-block:: python3 :caption: result_files_view.py :emphasize-lines: 1, 6 custom_text = get_custom_text("results_text.md") layout = html.Div( [ extra_message_selected_file, custom_text, buttons, result_files_table, table_loading_message, spinner, hidden_divs, checkbox_states, ] ) .. vale on The text is now visible in the view, as shown here: .. image:: ../img/custom_texts_results.png :width: 90% Customize other pages --------------------- To make these same modifications to any other page, edit the corresponding ``.py`` file in the ``ui\pages`` or ``ui\views`` folders. If you want to use ``get_custom_text(..)`` outside of the **Problem Setup** page or the **Results Files** view, you need to import it from the ``.ui.utils.texts`` submodule. Full-code customization ========================= Customize the setup page --------------------------- If you are familiar with Dash, HTML, and CSS, you can insert Dash elements---such as paragraphs (``html.P("Paragraph text")``) and breaks (``html.Br()``)---into this list, as needed. For example: .. code-block:: python3 :caption: problem_setup_page.py return html.Div( [ ..., html.P("This is a custom line of text."), html.Br(), html.P("This is a second custom line of text."), ... ] This yields the same result as the no-code example with the ``custom_intro.md`` text file. Use whichever method is more convenient. Customize the result files view -------------------------------- To use this same approach for the result files view, define your own Dash element: .. code-block:: python3 :caption: result_files_view.py custom_text = html.Div( [ ..., html.P("This is a custom text."), html.Br(), html.P("Here is a more detailed explanation about the result files."), ... ] ) layout = html.Div( [ ..., custom_text, ... ] ) This yields the same result as the low-code **Results view** example with the ``results_text.md`` text file. Use whichever method is more convenient. Customize other pages ---------------------- Similarly, you can directly modify the Dash components for any page and view. This does not require you to import any helper function.