// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \page quick-json-data-properties.html
    \previouspage quick-dynamic-properties.html
    \nextpage quick-states.html

    \title Connecting Properties to JSON Data Source

    Connect properties to data from a JSON file. You need two files in your project to do this:

    \table
      \row
        \li \c {data.json}
        \li A data file.
      \row
        \li \c {JsonData.qml}
        \li A singleton that reads data from \c {data.json}.
    \endtable

    To create these files, you need to create a new data model:

    \list 1
      \li In \uicontrol {Model Editor}, select \inlineimage {icons/zoomIn.png}.
      \li Select \uicontrol{Create}.
    \endlist

    The files are created in the \e {/imports/<projectName>/} folder of the project.

    \section1 Connecting a Text Property to a Data Source

    To connect a text property to a corresponding field in a JSON file:

    \list 1
      \li In the \uicontrol Navigator or \uicontrol 2D view, select a component
      that has a text property, for example, a text field.
      \li In the \uicontrol Connections view, go to the \uicontrol Bindings
      tab.
      \li Select \inlineimage {icons/plus.png}.
      \li In the first \uicontrol From field, select \uicontrol {DataStore}, and in the second field,
      select the JSON entry you want to use. In this example, \uicontrol {backend.name} is
      selected. This corresponds to the \e name entry in \c {data.json}.
      \li In the \uicontrol To field, ensure that \uicontrol text is selected.
      \image json-text-binding.webp
    \endlist

    Now, the text field is populated with data from the JSON file.

    \section1 Adding Data Fields to the JSON File

    If you add data fields to the JSON file, you need to manually do the same
    updates to \c {JsonData.qml}.

    \list 1
      \li Go to the \uicontrol Projects view and open \c {JsonData.qml}.
      \image project-jasondata.webp
      \li In the \uicontrol Properties view, create a new local custom property.
      \image json-new-property.webp
      \li Ensure that the name of the property matches the data entry in the JSON file.
    \endlist

*/
