Skip to content
Zyllio Documentation English
  • Pages
    • Welcome
    • First application
    • Dashboard
    • Design tool
    • icon picker
      Screen editor
    • Screen sequence editor
    • Simulation
    • Publications
    • Plugins
    • Tutoriels
      • Google Sheets
      • Airtable
      • Formulas
      • Variables
      • Chat
      • Twilio
      • Authentication
      • REST Integration
      • Stripe Payments
      • make
        Make
      • zapier
        Zapier
      • Custom domain
      • Offline Mode
      • Push Notifications
      • Favoris / Follower / Like
      • xano
        Xano
      • Translations
Zyllio Documentation English
/
Screen editor

Screen editor

The screen editor provides a user-friendly interface that allows users to create and customize screens for their mobile applications. This section briefly introduces the tool's objectives and highlights its main features

Screen Creation

Screen creation is available from the 'Screen' toolbar, which displays predefined templates to speed up the creation process
⁠
image.png
⁠
⁠
Modèles d'écran
Name
Description
Blank
Create a blank screen
Header
Create a screen with a title bar
Info
Create an informative screen with some text, an image, and a button
Welcome
Create a welcome screen with some text, an image, and a button
Contact
Create a contact screen with contact buttons: Twitter, Website, Phone, Email, and YouTube Channel
Booking
Create a screen that contains a registration form
Login
Create a preconfigured authentication screen with Email and Password fields and an authentication button
Sign up
Create a user registration screen with fields for Name, Email, Password, Profile Picture, and a registration button
List
Create a screen that displays the content of a table in a grid list format
Details
Create a screen that displays the details of a selection, with each field displayed according to its type. Use a Text component for text type, a Phone component for phone number type, a Map Marker component for location type, etc.
Update
Create a form-type screen that allows modification of each field in the selection. Use a FormText component for text type, a Switch component for boolean type, and a Choose Option component for options type, etc.
Create
Create a form-type screen that allows the creation of a record in a table based on the type of each column. Use a FormText component for text type, a Switch component for boolean type, and a Choose Option component for options type, etc.
List/Details
Create two screens simultaneously: one that displays the content of a table and another that shows the details of the selected item
Liste/Update
Create four screens simultaneously: one that displays the content of a table, another that shows the details of the selected item, a third one with an update form, and a fourth one with a creation form.
There are no rows in this table
⁠

Modification of the screens

⁠
image.png
⁠
⁠

Workspace Management

Spatial Organization of Screens
Align the screens precisely to ensure an efficient layout.
Use arrangement tools to optimize space and improve readability.
Manipulation Tools
Move and resize screens with intuitive tools.

Drag and Drop of Visual Components

Adding Components to Screens
Drag and drop visual components from the library onto the screens.
Choose from a variety of elements such as buttons, text fields, images, lists, etc.
Component Configuration
Customize the properties of each component according to your needs.
Adjust settings such as color, size, and interactive behavior.

Selection, Copy, and Paste

Selecting Screens and Components
Learn different methods for efficiently selecting screens and components.
Use shortcuts to speed up the selection process: CTRL+A to select all screens.
Copy-Paste
Quickly duplicate screens and components to save time.
Copy elements from one screen to another.

Defining the Application Theme

Customization of appearance
Select colors and other graphic elements to define the theme.
Real-time preview of changes for instant visualization.
⁠
image.png
⁠
⁠
Colors
Name
Description
Primary Color
Primary color used for the background of the title bar (header)
Primary Text Color
Primary color used for the text in the title bar (header)
Secondary Color
Secondary color used for the background of list item selections and buttons
Secondary Text Color
Secondary color used for the text of list item selections and buttons
Tertiary Color
Tertiary color used for the background of input fields, often semi-transparent
Terciary Text Color
Tertiary color used for the text in input fields
Background Color
Default color used for the background of screens
Text Color
Default color used for the text of components
There are no rows in this table
⁠

Properties
Nom
Description
Right to left
Toggle text display from right to left, useful for certain languages (e.g., Arabic)
There are no rows in this table
⁠

Theme Application

Easily apply the defined theme across the entire application.
Ability to change the theme at any time based on preferences.
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.