This is where we can provide a “dictionary” of common terminology a user might encounter while navigating the interface, reading our documentation, or discussing the designer. The goal is to provide a place they can go if they see or hear a phrase they’re not familiar with.
Screen
A Screen, in this context, is a display constructed to accomplish a task or group of tasks like visualizing and organizing information. It provides the means for a user to interact with the application at the level the person creating the screen chooses through the implementation of their design. In this way, you can imagine a screen being a department store and the designer the store manager: they choose what products and information are on display and accessible to the shopper while organizing the space to maximize the shopper experience.
This specifically refers to the area in the screen designer where you drag and drop screen elements into while designing the screen.
A generic screen describes a screen constructed with a JSON screen definition. These screens are still editable, however, instead of editing inside the screen designer the user will have to edit the screen by changing the JSON screen definition.
Screen Templates
There are three screen templates: Table, Form, or Blank.
A Fuuz table Template creates a fillable outline of a Fuuz table as the primary screen element displayed on the screen.
A Fuuz table is a screen element that can autofill data from a preselected Data Model or be customized as a way to display a variety of information. You can nest some screen elements inside the table columns creating a dynamic display in your screen's table.
A Fuuz form screen template is a screen with the primary screen element as a single form with save and delete buttons pre-organized on the screen.
A Fuuz form is a screen element that largely functions as a container that can be preloaded with a data model query and provides context for child elements.
A Fuuz blank screen template supplies an empty canvas screen without any additional screen elements.
Screen Element | Element
Elements are the building blocks of screens. Anything you can select in the Canvas or view in the Layers panel is an element. New elements are created by dragging an Element Type from the toolbox and dropping it into the screen where you’d like your new element, or by copying and pasting existing elements. You can configure the selected element in the Property Editor panel.
Screen Element Type | Element Type
There are four categories of Element Types: Layout, Input, Display, and Interaction. In the Toolbox on the left-hand side, you can see the element types organized by category. i.e. if you look under the category Layout the first element listed is an element type ‘Card’.
Property Editor Panel
The property editor panel is displayed in the screen designer to the right of the canvas screen. When you select a specific screen element, the editable properties associated with that element populate in the property editor panel.
At the bottom of the property editor panel, you will see three tabs labeled Designer, Layers, and Tabs. These provide a comprehensive way for viewing and editing select properties of the screen and screen elements.
When the elements tab is selected, the screen elements toolbox will display available screen elements. You can drag any of the screen elements from the toolbox into the main canvas to add one to your screen. Since there are many options available, you can use the search bar at the top of the toolbox to find exactly what you’re looking for. Just start typing and the screen elements in the toolbox will automatically start filtering to match
When the properties tab is selected, the property editor panel will display the properties of the selected screen element and allow you to view and edit the properties. The properties will be organized in categorical drop-downs allowing you to quickly navigate to the most commonly edited properties as well as providing an “Advanced” dropdown for more specific property editing. The properties can also be edited by selecting the drop-down “Edit”, then “Edit definition”. This will expose a JSON Object of the properties the user can edit directly.
When the Layers tab is selected, the property editor panel will display a tree view of the screen elements currently in the canvas screen. As you are building the screen, you may find it easier to select some screen elements using the layers tab rather than clicking on the screen element in the canvas screen. This also allows you a visualization of how data and context will be nested in the screen. From the Layers tab, you can drag and reorder elements as needed.
When the Tabs tab is selected, the property editor panel displays a list of tabs. Each tab in the list will have an editable dropdown. To select a tab in order to edit or add screen elements, click on the tab in the canvas screen. This will allow you to use the property editor panel Designer or Layers to edit the correct correlating screen elements.
Data Model
A Fuuz Data Model is a data structure that organizes relevant information about a particular subject and allows you to easily interact with and display the information stored in the database.
Data Flow
A Data flow is a visual representation or diagram that shows how different components or nodes are connected to each other to perform tasks or automate processes.
Data flows in Fuuz are categorized by the environment in which they are run; these can be backend, gateway, or web.
Backend flows are run on the Fuuz server and can create, read, update, or delete data stored in the database and provide a visual representation of how the data is connected.
Web Flows are data flows that can interact directly with users and screens: prompting users for input, displaying notifications, changing form values, hiding and showing containers, and more.
The Gateway environment for data flows is not currently available.