Pages

Using Pages, you can configure the interface and the navigation that will be shown to the app users. You may create multiple pages for app users and show some pages to only certain users by enabling that feature/plugin under the Roles section. You must create at least one form before you can add a page. To test or preview created Pages, create a role having access to the desired page, then invite yourself as an app user and switch to runtime UI/ Launch App (left sidebar).

  • Name: The name of the page.

  • Navigation Link Label: The name displayed in runtime that will be hyperlinked to an external website.

  • Page Type: Select the page type to customize the page to suit business needs. There are 4 options:

    • List Builder: This is a page type that allows users to design the page using the components that are currently supported.

    • List Builder V2: This is same as list builder but, selecting this will also enable reactive search (Currently available for Market and My NFTs pages)

    • Plugins: The feature allows the Admins to customize and add multiple plugins to any of the pages on their app. A single page can be designed to render different types of data. To know more about different types of plugins, click here

    • External Navigation: Give page links to other websites for reference.

  • Data Source: Select the data to be shown to the app users.

    • World State - Shows NFTs at their current state

    • Transactions - Shows the history of changes to the World State

    • Drops - Fetched the data from all the drops

    • NFTs - Shows the data from world state’s elastic index

  • Show Records: Filter the data shown to the app user.

    • My Records: Display only records created by the signed-in user.

    • All Records: Display records created by any user.

  • Query: A top-level group is created with a set of rules which will be evaluated by the system and the information will be rendered based on the “AND” or “OR” condition selected. Set this query to get multiple information and filter the data shown to the user.

  • Sort Configuration: All the fields in all the forms will be listed with their attributes. Select from the dropdown to change the attributes or click + to add more fields. You can also set the fields to accept only numeric values by enabling the same from the settings. In sorting for sale price, you must enable isNumericField in the settings.

  • Search fields: Enter the label names and select the search field type and fields that will be listed with their attributes. Select the attributes from the dropdown or click + to add more fields. To use any nickname in filter, you must create a field in the Fields used in pages and in the API Key section add <originalApiKey>+_nickname. Refer to the table given below to know more about the filter types, settings and its description:

Field types Settings Description
Global Search Highlight Highlights the search results
  Auto Suggestions Set whether the autosuggest functionality should be enabled or disabled
  Suggestions Count Number of suggestions to show. Defaults to 10
Price Range Slider (Sale Price) Histogram Interval Set the histogram bar interval, applicable when Show Histogram is true
  Show Histogram Whether to display the range histogram or not
  Show Currency Indicates the supported currency in the app
Tag Cloud Display Count Show a count of the number of occurrences besides each list item
  Size Number of list items to be displayed
  Multi Select Whether to support multiple tag selections
Date Range Focused Whether to display the calendar view on initial load or not
  Number of Months Number of months to be shown in the calendar view. Defaults to 2
  Auto Focus End Focus the end date field after the starting date is selected. Defaults to true
Radio Single List Display Count show count value of the number of occurrences besides a list item
  Show Radio Show radio button icon for each list item
  Show Search whether to show a searchbox to filter the list items locally
  Sort By sort the list items by one of count, asc, desc. Defaults to count, which sorts the list by the frequency of count value, most first
MultiList Display Count Show count value of the number of occurrences besides a list item
  Show Checkbox Show checkbox icon for each list item
  Size Number of list items to be displayed
  Show Search Whether to show a searchbox to filter the list items locally
  Sort By Sort the list items by one of count, asc, desc. Defaults to count, which sorts the list by the frequency of count value, most first
Single Dropdown List Size Number of list items to be displayed
  Display Count Show count of number of occurrences besides an item
  Sort By Sort the list items. Count sorts the list based on the count occurrences. Asc and Desc sorts the list in the alphabetical order
  Placeholder Placeholder to be displayed in the select box. It’ll be only applicable when no value is selected
Multi Dropdown List Size Number of list items to be displayed
  Display Count Show count of number of occurrences besides an item
  Sort By Sort the list items. Count sorts the list based on the count occurrences. Asc and Desc sorts the list in the Alphabetical order
  Placeholder Placeholder to be displayed in the select box. It’ll be only applicable when no value is selected
Date Picker Focused Whether to display the calendar view on initial load
  Placeholder Placeholder to be shown in the field when no date is selected. Defaults to “Select Date”
  Show Clear Displays a cross icon to clear the input value. Defaults to true
Range Slider Histogram Interval Set the histogram bar interval, applicable when Show Histogram is true
  Show Histogram Whether to display the range histogram or not
  Show Currency Indicates the supported currency in the app
Category Search Placeholder Set placeholder text to be shown in the component’s input field. Defaults to “Search”
  Auto Suggestion set whether the autosuggest functionality should be enabled or disabled

  • Add Operations: Drag and drop Operations (Forms) to Add Operations panel. This will allow users to add new records using the form by placing an Add button at the top section of the page.

  • Context Operations: Drag and drop Operations (Forms) to Context Operations panel. This will allow the form to be used as context action for existing records. In the runtime UI, context actions are accessible at the end of the row under the Actions menu. Examples of context actions are modify, delete, transfer, view, change status.

  • Fields: Drag and drop Fields which will be visible to the app user as records columns.

  • Number of Items per page: Provide the number of items that must be fetched in a single page. If more items exist, then those can be fetched in the next page.

  • Show Cards: Enable this setting to show page items as cards instead of list.

  • Hide/ Remove Date range control from search: Enable this setting if you wish to hide or remove date range control from search.

  • + Add View: Based on business requirement, add the label and select any one view type:

    • WebXR-Immersive Renderer: Enter the HTML element and the script.

      • Show Assets: Upload the static media assets that can be used within pages.

    • WebXR-Immersive Renderer (Drops): Enter the HTML element and the script.

      • Advanced Settings

        • Exclude drops whose expiration has reached following (Days) - Enter numeric value. Drops whose expiration has reached those many days will be excluded from the search results.
        • Exclude drops with tags - Enter the tags given to the drops that must be excluded in the search result.
        • Show Assets: Upload the static media assets that can be used within pages.

  • Views Navigation Layout: Select the layout for changing the configured views on runtime. The users can select any one of the options to switch to that view.

    • Dropdown: Shows all the available views as a separate drop-down on the page.

    • Tabs: Shows all the available views in multiple tabs.

    • Sub Menu: Shows all the available views in sub navigation menu.

    • Tab Switch: Allows you to quickly switch between two views on the same page.

  • Default View Label: Enter a name that will be default displayed for the view mode in runtime.

  • Header Text: Customize your page by providing description/instructions for the app. This will be shown at the top section of the page.

  • Footer Text: Customize your page by providing description/instructions for the app. This will be shown at the bottom section of the page.

UI Customizations

  • Navigation Icon: Customize your page by providing unique and helpful icon for each page.

  • Page CSS: You can customize the look and feel of a page by overriding CSS classes. Click Use Sample button to check how you can make CSS changes.

  • Hide Page from Navigation Menu: Enable this option if you wish to hide this page from the navigation menu.

  • Menu Weight: This is the integer value. Pages are ordered left to right in the navigation menu using weight. The page with the highest menu weight will be placed first.