Skip to main content

UI BUILDER

UI Builder is a key design time component in AdaptiveUX that enables the ATP business users to build new UI components using a simple drag-and-drop interface.

The UI Builder leverages the underlying Material UI component library to provide options of both presentational and container components.

High Level Architecture​

Overview​

UI Builder has below areas.

  1. Screen list – where the list of screens will appear.
  2. Builder Area – Builder area have screens. Where we drag and drop the components. This where we see our Ui on the tool.
  3. Components – These components are from Material Ui, and some custom-made components are present there.
  4. Property Panel – when we click the component on the builder area, property panel will appear based on the component. These are the properties that are based on the specific component. This panel is used for editing the selected component.

Manage Screens​

It has below functionalities.

Add Screen/Component​

  1. Click the plus icon and select screen on popover. Then dialog appears.
  2. Fill the screen name. Then click the add screen. Your screen will be created in the screen list area.

Add Screen

Edit Screen​

Click the 3 dot button in the screen list and selecte edit option to edit screen.

Add Screen

Delete Screen​

Click the 3 dot button in the screen list and selecte delete option to delete screen.

Add Screen

Search Screen​

Add Screen

Save Screen​

Components​

Primary Components​

INPUTS​

  1. Button
  2. Button Group
  3. Checkbox
  4. Fab
  5. Radio Button
  6. Slider
  7. Switch
  8. Text Field

DATA DISPLAY​

  1. Avatar
  2. Badge
  3. Chip
  4. Icon
  5. List
  6. ListItemText
  7. ListItemAvatar
  8. ListItemIcon
  9. ListSubheader
  10. ListItemSecondaryAction
  11. ListItem
  12. Typography
  13. CustRowTable
  14. Divider

FEEDBACK​

  1. DialogContentText
  2. Dialog
  3. DialogActions
  4. DialogContent
  5. DialogTitle
  6. Snackbar
  7. SnackbarContent
  8. CircularProgress
  9. LinearProgress

SURFACES​

  1. Card
  2. CardContent
  3. Paper
  4. AccordionSummary
  5. AccordionDetails
  6. CardMedia
  7. CardActions
  8. Accordion
  9. AccordionActions
  10. CardActionArea
  11. CardHeader
  1. Drawer
  2. MenuList
  3. Link
  4. Menu
  5. MenuItem

LAYOUTS​

  1. MuiStepper
  2. Grid
  3. Container
  4. TableContainer
  5. TableHead
  6. TableBody
  7. TableRow
  8. TableFooter
  9. MuiTab
  10. Hidden
  11. Table
  12. Box
  13. CustLayout
note

Refer this link for complete list of primary components props & styles Primary Components

Functional Components​

"Functionality As a Component"

Functional components are user defined custom components which provides a complete functionality.

Master Layout​

Identity Management​

Login SignUp Reset Password

Access Management​

General Master​

Report Viewer​

Form Viewer​

Template Components​

It enables user to customize any primary components and save as template for reuse.

Component Tree​

Component Tree is used to view layout hierarchy for easy accessibility of components used in the screen.

Designer Features​

UI Designer has following features

  1. Zoom In/Out
  2. Full Screen
  3. Design Preview
  4. Build Preview
  5. Undo/Redo

Build​

It enables user to build the project and deploy the code in to github repository.