Skip to main content

Customized data

You can configure your theme templates to request additional data.

For example, suppose you want a page on your storefront to include a customized slider of four products. You can request the information associated with those products, view the information in the Data Viewer of the developer tool, and then add them to your template using CSS.

Currently, the data included in the templates pulls basic information from your marketplace to help you get started on your theme (see Use AppDirect data).

This topic includes the following types of custom data that are available for developers to retrieve information, view in the Data Viewer, and add to their template:

  • Application—Returns the data of a specific application.
  • List—Returns a list of applications associated with categories, filters, attributes, and search queries.
  • FAQ—Returns the Frequently Asked Questions (FAQs) list.
  • Navigator—Returns the categories list.
  • External—Returns information from external APIs.

Application​

Complete the procedures in this section to search for data associated with an application, add the data tag to your theme template, and then view the customized data.

To search for data associated with an application

  1. Start the Toolkit.
  2. Click Search Data in the developer toolbar. The Search Data bar appears and Apps is selected by default in the drop-down list.
  3. Type a search string. Application names appear.
  4. Click the desired application and the following information appears:
    • Integration—Data tag that you can add to your theme template to view information about the application.
    • Raw data—Information pulled from the page objects service.

To add the data tag to your theme template

  1. Copy the data tag in the Integration section in the Data Viewer. For example:
    <data type="app" value="2373" />
  2. Open your project in your text editor and find the template file that you want to include the additional data.
  3. Paste the data tag between {% block data %} and {% endblock %}. The following example shows the application, Dropbox, added to the template. 
    {% block data %}  
    <data type="app" name="dropbox" value="2373" />  
    {% endblock %}
  4. Save your *.html file in your text editor and refresh the browser that is running the developer tool. The data now appears in the Data Viewer of the developer tool.

To view the customized data

  1. Click the expand icon in the developer tool.
  2. Click Data Viewer > productLists > custom_apps. The product information appears. The following example shows information about the Dropbox product. 
    "productList": {  
      custom_apps: {  
        "custom_apps_dropdox":  
            {  
                "href": "https://marketplace.appdirect.com/api/marketplace/v1/products/417",  
                "id": 417,  
                "uuid": "61f2f340-ae52-11e3-ac06-22000a1dd446",  
                "url": "https://marketplace.appdirect.com/apps/417",  
                "name": "Dropbox",  
                "productType": "WEB_APP",  
                ...  
            }  
       }    
    }
    Developers can view the additional data about the product and add it to their template. For example, a developer can add the Dropbox product to a slider in the storefront: 
    {% set dropbox = productList.custom_apps.custom_apps_dropdox %}  
        <div class="adb-slider--item">  
            <h3>{{ dropbox.name }}</h3>  
            <p class="">{{ dropbox.description | truncate(50) }}</p>  
        </div>

List​

Complete the procedures in this section to search for a list of applications associated with categories or attributes, add the data tag to your theme template, and then view the customized data.

To search for a list of applications associated with categories or attributes

  1. Start the Toolkit.
  2. Click Search Data in the developer toolbar. The Search Data bar appears and Apps is selected by default in the drop-down list.
  3. Click the drop-down list and select one of the following:
    • Categories—Organizes products using two organizational levels for grouping products.
    • Attributes—Organizes products using inherent characteristics of a product.
  4. Type a search string. Category or attribute names appear, depending on your selection in the previous step.
  5. Select the category or attribute. The following information appears:
    • Integration—Data tag that you can add to your theme template to view information about the list of applications associated with that category or attribute.
    • Raw data—Information pulled from the page objects service.

To add the data tag to your theme template

  1. Copy the data tag in the Integration section in the Data Viewer. For example, <data type="list" attributes="4334" sort="ALPHABETICAL" />.

  2. Open your project in a text editor and find the .html file in which you want to include the additional data.

  3. Paste the data tag between {% block data %} and {% endblock %}, which are included in your template. The following example shows the mobility attribute added to the template.

    {% block data %}  
    <data type="list" name="mobility" attributes="4334" sort="ALPHABETICAL" />  
    {% endblock %}

    You can use reductive filtering by combining filters, attributes, and categories. Additionally, you can use multiple IDs in the same option separated by commas. For example:
    <data type="list" name="mobility" attributes="4334,1235" categories="12312,4356" sort="ALPHABETICAL" /> You can sort the lists using the following methods:

    SortDescription
    RELEVANCEThe default order of the application.
    ALPHABETICALApplication names appear in order from A to Z.
    POPULARITYApplications with the most active subscriptions appear first.
    NEWEST_FIRSTNewest applications appear first.
    RATINGHighest rated applications appear first.

  4. Save the .html file and refresh the browser that is running the developer tool. The data appears in the Data Viewer.

To view the customized data

  1. Click the expand icon in the developer tool.
  2. Click Data Viewer > productLists > custom_lists. The information for a list of products associated with a category or attribute appears. The following example shows information about the mobility attribute. 
    "productLists": {  
      custom_lists: {  
        "custom_lists_mobility": [  
            {  
                "href": "https://marketplace.appdirect.com/api/marketplace/v1/products/417",  
                "id": 417,  
                "uuid": "61f2f340-ae52-11e3-ac06-22000a1dd446",  
                "url": "https://marketplace.appdirect.com/apps/417",  
                "name": "Yast Time Tracker",  
                "productType": "WEB_APP",  
                ...  
            },  
            ...Other apps  
        ]  
      }  
    }
    Developers can view the additional data about categories or attributes and add it to their template. For example, the developer can add products associated with the mobility attribute to one of the sliders in the storefront by adding the following snippet of CSS to one of the .html files. 
    {% for app in productLists.custom_lists.custom_lists_mobility %}  
        <div class="adb-slider--item" data-slick-index="0" aria-hidden="false">  
            <h3>{{ app.name }}</h3>  
            <p class="">{{ app.description | truncate(50) }}</p>  
        </div>  
    {% else %}  
        <div>No apps here</div>  
    {% endfor %}

FAQ​

You can request the Frequently Asked Questions (FAQ) list by adding the following block tag to your one of your .html files:

{% block data %}
<data type="faq" />
{% endblock %}

Information from the FAQ is available in the Data Viewer section of the developer tool.

"ui": {
    "faqs": [
        {
            "name": "Frequently Asked Questions",
            "faqs": [
                {
                    "question": "How do I purchase an application through the AppDirect marketplace?",
                    "answer": "In order to purchase an application, please visit the Application Marketplace and click on the profile of the application you would like to purchase. From the product profile, you can either select a free trial or drill down to the Editions and Pricing to select a subscription level that best suits your needs."
                },
                {
                    "question": "As an ISV, how do I list my product with AppDirect?",
                    "answer": "In order to list your product with AppDirect, please visit the AppDirect Developer Portal to learn about our API and click-on "Integrate Now" to begin your integration. Please reach out to us at developer@appdirect.com should you have any additional questions."
                }
            ]
        }
    ]
}

Developers can add information from the FAQ list to their template. The following example shows the FAQ added to the Home page:

{% block data %}
<data type="faq" />
<data type="list" subcategories="2223" name="mobility" />
{% endblock %}

{% block content %}
    <div class="row row--spaced">
        <div class="col col-xs-8 col-fix-inv-sm-4 ">
            <div class="layout-content--section">
                {{ hero() }}
            </div>
            <div class="layout-content--section">
                {{ slider("Featured Apps", productLists.featuredapps, i18n) }}
            </div>
            <div class="layout-content--section">
                {{ slider("Popular Apps", productLists.popularapps, i18n) }}
            </div>
            <div class="layout-content--section">
                {{ homeFaq(ui.faqs.items[0], ui.faqs.l10n) }}
            </div>
        </div>
    </div>
{{ sliderScript() }}
{% endblock %}

In this example, the homeFaq macro (at themes/_themeName_/content/macros/home-faq.html) was imported into the file.

You can request the category list (navigator) by adding the following block tag to your one of the .html files:

{% block data %}
<data type="navigator" />
{% endblock %}

Information from the category list becomes available in the Data Viewer section of the developer tool:

"ui": {
  "navigator": {
    "attributeGroups": [
        {
            "id": 33,
            "name": "App Collections",
            "showOnNavigation": false,
            "vendorTaggable": true,
            "attributes": [
                {
                    "id": 73,
                    "name": "Bundles",
                    "queryAlias": null,
                    "numTaggedProducts": 11
                },
                {
                    "id": 74,
                    "name": "Deals",
                    "queryAlias": null,
                    "numTaggedProducts": 15
                }
            ]
        }
    ],
    "categories": [...]
  }
}

Developers can add information from the category list to their theme template. The following example shows the category list added to the Home page:

{% block data %}
<data type="navigator" />
<data type="list" subcategories="2223" name="mobility" />
{% endblock %}

{% block content %}
    <div class="row row--spaced">
        <div id="sectionNavigation" class="col col-fix-4 d-none d-sm-block">
            {{ navigator(ui.navigator) }}
        </div>
        <div class="col col-xs-8 col-fix-inv-sm-4 ">
            <div class="layout-content--section">
                {{ hero() }}
            </div>
            <div class="layout-content--section">
                {{ slider("Featured Apps", productLists.featuredapps, i18n) }}
            </div>
            <div class="layout-content--section">
                {{ slider("Popular Apps", productLists.popularapps, i18n) }}
            </div>
        </div>
    </div>
{{ sliderScript() }}
{% endblock %}

External​

You can request external data from any public API. For example, you can add data from your Content Management System (CMS) to your storefront. To request external data, add the following block tag to one of your .html files and add the external data type, and for the value set the API URL. The following example shows how to include weather forecast information:

{% block data %}
<data type="external" name="weather" value="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&amp;format=json&amp;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys" />
{% endblock %}

The information from the specified external API appears in the Data Viewer of the developer tool:

{
    external: {
        external_weather: {
            temperature: '25C',
            ...otherDataFromApi
        }
    }
}

To add data from the API to a page, add the following div tag to one of the .html files:

<div class="temp">
    {{ external.external_weather.temperature }}
</div>

Was this page helpful?

Tell us more…

Help us improve our content. Responses are anonymous.

Thanks

We appreciate your feedback!