Appizap
  • Appizap Overview
  • Build Apps
    • On-boarding Flow
    • Ideas to Apps using AI
    • Create a new app
    • App Configuration
      • App Overview
      • General Settings
      • Domain Settings
      • Version Release & Management
      • App Assets
      • Auth Settings
    • UI Builder
      • Module
      • Menu Navigation
      • Version Logs & Restore
      • Keyboard Shortcuts
    • GUI, Themes & Styles
    • Event handlers
    • Write JavaScript
      • JavaScript within {{ }}
      • JavaScript Query
      • Transformers
      • Temporary State
      • Data Responder
      • Built-in JavaScript Functions
      • Use Third-party Libraries
    • How-to-use
      • Welcome to Appizap!
      • FAQ
  • Appizap Dashboard
    • Your Apps
    • Database
    • Workflows
    • Media & Files
    • Query Library
    • Audit Logger
    • Templates
  • Workspaces
    • Workspace Settings
    • User Authentication
    • User Groups
    • Themes
    • Advanced
  • Appizap Concepts
  • Appizap Studio
    • Data Browser
      • Screen, Modules & Navigations
      • Active Components
      • In-App Modals
      • Data Queries in your App
      • Global Data Variables
    • Layers
    • Screen Settings
    • Debugger
    • Data Queries
    • Widget Library
      • Link
      • Icons
      • Steps
      • Button Group
      • Form Button
      • Grid
      • Responsive Grid Layout
      • Drawer
      • Navigation
      • Cascader
      • Comment
      • Mention
      • Collapsible Container
      • Rich Text Editor
      • Input
      • Modal
      • Text Display
      • Number Input
      • Password
      • List View
      • Date
      • Checkbox
      • Radio
      • Switch
      • Multi Select
      • Dropdown
      • File Upload
      • Phone Number Input
      • Download Pdf Button
      • Image
      • Divider
      • Progress Circle
      • Progress
      • Form
      • JSON Schema Form
      • Container
      • Tabbed Container
      • Table
      • Date Range
      • Time
      • Time Range
      • Toggle Button
      • Segmented Control
      • Rating
      • Timeline
      • Slider
      • Range Slider
      • Control Button
      • File Viewer
      • Image Carousel
      • Lottie Animation
      • Tree
      • Tree Select
      • IFrame
      • Calendar
      • Custom Component
      • Auto Complete
      • Chart
      • Graph Chart
      • Treemap Chart
      • Basic Chart
      • Geo Map Charts
      • Funnel Chart
      • Candlestick Chart
      • Select
      • Audio
      • Caller
      • Text Area
      • Responsive Flex Layout
      • Timer
      • Image Editor
      • AI Component
    • Component Specific Actions
  • Database
    • Connect DB
    • Build Internal DB
      • Arrays
      • Indexes
      • Using JSON Type
      • Cascade Delete
      • Data Load and Import
    • Data Sources
      • Connect Data Sources
        • Big Query
        • ClickHouse
        • CouchDB
        • DynamoDB
        • Elasticsearch
        • MariaDB
        • Microsoft SQL Server
        • MongoDB
        • MySQL
        • Oracle
        • PostgreSQL
        • Redis
        • Snowflake
      • Connect APIs
        • REST API
        • GraphQL
        • Google Sheets
        • S3
        • OpenAPI
        • Firebase
        • WooCommerce
        • OpenAI
        • Athena
        • Lambda
    • Query Library
    • Storage
      • Buckets
      • Uploads
      • Objects
  • Appizap Workflow Builder [Pro]
    • Workflows
      • Create a workflow
      • Nodes
      • Connections
      • Sticky Notes
      • Tags
      • Import and Export
      • Templates
      • Sharing
      • Settings
      • History
      • Find Workflow ID
    • Build Flow Logic
      • Conditional Nodes
      • Data Merging
      • Looping
      • Waiting
      • Sub-Workflow
      • Execution Order
    • Data Handling
      • Data Structure
      • Transforming data
      • Use Code
      • Mapping using UI
      • Data Item Linking
      • Data Pinning
      • Data Editing
      • Data Filtering
      • Data Mocking
      • Binary Data
    • Editor UI
    • Credentials
      • Create and Edit
      • Sharing
    • Integrations
      • Node Types
      • Core Nodes
      • Actions
      • Triggers
      • Credentials
      • Custom API Operations
    • Error Handling
      • Errors related to memory
    • Keyboard Shortcuts
  • Security & Compliance
  • Terms & Conditions
  • Privacy Policy
  • User Guide
    • Getting Started
    • Admin Console
    • Data Maintenance
Powered by GitBook
On this page
  • Basic
  • Interaction
  • Layout
  • Style
  • Body Style
  • Footer Style
  1. Appizap Studio
  2. Widget Library

Steps

The widget shows the progress through a sequence of numbered steps. This can be used to represent navigation and display a feedback message after each step is done.

PreviousIconsNextButton Group

Last updated 4 months ago

Basic

Steps

List down the number of steps involved here. Each step should specify the following details.

Property
Description

name

The name to be displayed near the step icon

tooltip

The text to be shown as the user hovers the mouse over the stepper

id

This is for development purpose to set an id for each step

widget

The name of the widget attached in the step

[{"name":"Profile Info","tooltip":"Enter your profile information","id":0,"widget":"w1"},{"name":"Upload Docs","tooltip":"Upload the documents required","id":1,"widget":"w2"},{"name":"Choose Services","tooltip":"some tooltip","id":2,"widget":"w3"},{"name":"Submit","tooltip":"some tooltip","id":3,"widget":"w4"}]

Interaction

Event Handlers

Event
Description

Click

Step Changed

Hide

This sets whether the widget has to be displayed on the screen when the program is loaded. This shows/hides the widget both on desktop and mobile devices.

Disabled

Disables the user interaction with the element on the page. It visually indicates that the element is inactive and prevents users from interacting with it when applied.

Layout

Theme

Property
Description

Dot

Number

Icon

Icon with Text

Tiles

Percentage

Mode

The Stepper widget provides two modes to customize its layout.

Vertical

The stepper widget displays steps vertically.

Horizontal

The stepper widget displays steps horizontally.

Initial Step for Stepper

This is the index based number which specifies the step number that should be displayed for users to start with the widget.

Hide Body

Hides the body of the widget content and shows only the steps section.

Hide Footer

Hides only the footer section of the widget, removing the 'Previous' and 'Next' buttons.

Progress Percentage

Enter a numerical value in this field and this will set the percentage value during the progress of each step.

Style

Property
Description

Background

Users can change the colour of the text background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the font clearly.

Border Color for Completed Steps

Set the colour to the border lines for the steps that are completed.

Margin

This value is set in terms of "px" number which creates the space between the border and the content of the widget.

Padding

This value is set in terms of "px" number which creates the space between the border and outer elements.

Border Color

Set the colour to the border lines for the steps where the user did not complete the step.

Border Radius

This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

Border Width

Set the thickness of the border of the widget using this value. It is defined using "px" terms.

Text Weight

Increase or decrease the thickness of the font using the list of numbers from 100-800.

Body Style

Property
Description

Body Padding

This value is set in terms of "px" number which creates the space between the body border and other elements of the widget.

Background

Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from.

BG Image

Provide the URL for the image serves as the background image to the widget

BG Repeat

BG Size

Specifies the size of the background image. auto- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

BG Position

BG Origin

Footer Style

Property
Description

Footer Padding

This value is set in terms of "px" number which creates the space between the footer border and other elements of the widget.

Background

Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from.

BG Image

Provide the URL for the image serves as the background image to the widget

BG Repeat

BG Size

Specifies the size of the background image. auto- Default value. The background image is displayed in its original size cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

BG Position

BG Origin

This event will be triggered when the user clicks on the icon.

This event will be triggered when the moves to another stepper.

Controls the repetition of the widget's background image. repeat - The background image is repeated both vertically and horizontally. no-repeat - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here:

The reference to the list of options can be found here:

Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here:

Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here:

Controls the repetition of the widget's background image. repeat - The background image is repeated both vertically and horizontally. no-repeat - The background-image is not repeated. The image will only be shown once. The reference to the list of options can be found here:

The reference to the list of options can be found here:

Sets the starting position of a background image. center - keeps the image at the center position. The reference to the list of options can be found here:

Specifies the origin position (the background positioning area) of the background image. The reference to the list of options can be found here:

MDN web docs
MDN web docs
MDN web docs
MDN web docs
MDN web docs
MDN web docs
MDN web docs
MDN web docs
Insert
Preview
Set the visibility
Read-only
Vertical or Horizontal
Initial step to start with