Drag and Drop Studio¶

The Drag and Drop Studio is your visual workspace for building and customizing your app's home page using our intuitive interface.

Overview¶

Our Drag and Drop Studio provides a visual canvas where you can design your app's home page by arranging and customizing pre-built components. This no-code solution makes it easy to create professional, engaging app layouts without writing any code.

Features¶

Pre-built Components¶

• Access our library of ready-to-use components
• Drag and drop components directly onto your canvas
• Customize each component through provided options
• Arrange components in any order

Component Sources¶

The studio supports components from multiple sources:

1. Pre-built Components
2. Standard library of tested components
3. Ready for immediate use

4. Fully customizable through the interface

5. Sandbox Components

6. Custom components created in the Appora Sandbox
7. Automatically appear in your component library

8. Full compatibility with the drag-and-drop interface

9. Custom Repository Components

10. Components built in your GitHub repository
11. Can be linked using component IDs
12. Not directly visible in the component library

How to Use¶

1. Access the Studio
2. Log into your Appora dashboard
3. Navigate to the Drag and Drop Studio

4. Select your app's home page canvas

5. Add Components

6. Browse the component library
7. Drag desired components onto the canvas

8. Arrange them in your preferred order

9. Customize Components

10. Click on any component to edit
11. Use the options panel to customize settings

12. Preview changes in real-time

13. Link Custom Components

14. Note the component ID from your custom repository
15. Use the component linking feature
16. Insert the component ID where needed

Best Practices¶

1. Layout Planning
2. Plan your layout before starting
3. Consider user flow and navigation

4. Maintain consistent spacing between components

5. Component Organization

6. Group related components together
7. Maintain a logical content hierarchy

8. Use appropriate spacing and dividers

9. Testing

10. Preview your layout on different device sizes
11. Test all interactive elements
12. Verify custom component integration

Limitations¶

• Custom repository components require component IDs for integration
• Some advanced customizations may require sandbox or repository development
• Layout changes may take a few minutes to propagate to live apps

Support¶

Need help with the Drag and Drop Studio? - Review our video tutorials - Contact our support team at admin@appora.ca - Check our component documentation

Next Steps¶

1. Explore available pre-built components
2. Plan your home page layout
3. Start dragging and dropping components
4. Customize your layout
5. Preview and publish your changes