This component is a structured layout for an app's home screen, featuring a left-aligned panel with a logo, app title, and navigation buttons, alongside a customizable background image. The left panel organizes key actions into buttons for navigation, each linked to specific screens or functionalities. The right section is visually enhanced with a full-height image, creating a balanced and user-friendly interface for quick access to app features.

Instruction for Using Simple Home Screen

This component represents the main home screen layout for an application. It includes a left-aligned panel with a logo, app title, and navigation buttons, alongside a background image. Below are step-by-step instructions on how to use and customize this component.

Structure Overview

1. conHomeScreen:
   The main container that holds the entire layout. It spans the full width and height of the parent container.

2. conLeft:
   A vertical container on the left side of the screen that contains the logo, app title, and navigation buttons.

3. imgHomeScreen:
   A background image that fills the remaining space on the right side of the screen.

Steps to Use

1. Logo Setup (imgLogoApp)

• Replace the placeholder OnSelect property if you want to add interactivity when clicking the logo.
• Set the Width property to adjust the logo size.

2. App Title (txtAppTitle)

• Update the Text property to display the name of your app.
• Modify FontColor, Size, and Weight properties to customize the appearance of the title.

3. Buttons in conScreenButtons

• There are three buttons (btnHome1, btnHome2, and btnHome3), each configured to navigate to 'Screen1' with a specific action context.
• To Customize:
  • Update the Text property to change the button label.
  • Modify the OnSelect property to navigate to a different screen or perform a different action.
  • Adjust the Icon property to use a different icon from the available options.

4. Background Image (imgHomeScreen)

• Replace the placeholder image by setting the Image property.
• Adjust Height and Width to fit the desired dimensions.

Customization Tips

• Alignment and Padding:
  Modify PaddingTop, PaddingLeft, and PaddingRight in conLeft or conScreenButtons to adjust spacing.

• Display Modes:
  Use the DisplayMode property in buttons to control their availability (Edit, View, or Disabled) based on specific conditions.

• Navigation Context:
  Update the ctxSelectedAction in the OnSelect properties to pass different parameters when navigating between screens.

Example Use Case

• Logo: Displays the company or app logo.
• App Title: Highlights the app name prominently.
• Navigation Buttons: Provides quick access to key functionalities like:
  • Button 1: Opens a task management screen.
  • Button 2: Opens an approval screen (conditionally enabled).
  • Button 3: Opens a document screen (conditionally enabled).
• Background Image: Enhances the visual appeal of the home screen.

By following these steps, you can effectively configure and integrate the conHomeScreen component into your application.