Point and Navigate to Screens in Component.



In my previous post, we have created the UI for the component. If you haven't seen it, please check it first before moving on here. 

In this post, we will be learning how the items in our gallery will point to screens on our App once we place this component on those 3 screens.


Steps:

1. Click on the component 'compLeftNavBar' under Tree View and then under `Properties`, click `New custom property'.
2. Type 'MenuItems' and set the data type to `Table` and press Create.
3. Select `MenuItems` property on top and set its value to:
Table(
    {
        MenuLabel: "Home",
        MenuIcon: Icon.Home,
        MenuScreenNavigate: App.ActiveScreen,
        MenuID: 1
    },
    {
        MenuLabel: "Profile",
        MenuIcon: Icon.CheckBadge,
        MenuScreenNavigate: App.ActiveScreen,
        MenuID: 2
    },
    {
        MenuLabel: "Cart",
        MenuIcon: Icon.AddDocument,
        MenuScreenNavigate: App.ActiveScreen,
        MenuID: 3
    }
);

You can edit the `MenuIcon` according to you.
If you can't see it, try refreshing your browser tab after saving your work.

4. Now click on the gallery on your component and edit its `Items` property to `compLeftNavBar.MenuItems` (without quotes).

Steps to Edit the elements inside your gallery:
1. Click on the label and set its `Text` property to `ThisItem.MenuLabel`.
2. Similarly, click on Icon and set its `Icon` property to `ThisItem.MenuIcon`.


Till now, your component will look like this:
Now you would want to click on Home and navigate it to a different screen or click on Profile and navigate to Profile screen. To do this, you'll need to place a transparent button behind your label.

1. Place a button in your gallery for 1 item.
2. Edit the `Height` property of this button to heigh of our label. So, name of label is `lblTitle` then value for the height property will be `lblTitle.Height+lblTitle.Y`.
3. Similarly edit the `Width` property of this button to width of the template which will be, `Parent.TemplateWidth`.
4. Set the X and Y property of this button to 0.

This is how it will look:


Now you need to make your button transparent. For that:
1. Set the `Fill`, `HoverFill`, `PressedFill` properties of the button to `Color.Transparent`.

Now you have a button for all three labels set to transparent:




Now set the `OnSelect` property of this button to `Navigate(ThisItem.MenuScreenNavigate)`.

Comments

Post a Comment

Popular

How To Create MySQL Table with SequelizeJS

Image
Hello, in this post I will be showing how you can create an SQL table using JavaScript without the knowledge of MySQL. Sequelize is a promise-based  Node.js   ORM tool  for  Postgres ,  MySQL ,  MariaDB ,  SQLite ,  Microsoft SQL Server ,  Amazon Redshift  and  Snowflake’s Data Cloud . It features solid transaction support, relations, eager and lazy loading, read replication and more.
OPEN

How To Read CSV Files in Java as Maven Project

Image
Many of us have problems reading CSV files in Java but not anymore!. In this guide, I will share how to read CSV files as Maven Project. For creating a Maven project: In your Eclipse IDE, click on File > New > Project... > Maven >Maven Project > Next > Check "Create a simple project" checkbox. Under Group Id: The name could be anything. It is same as any package name. E.g. in.sumitkp Under Artifact Id: Same as above It is same as any project name. E.g. maven-demo1 Let the Version be the default. Under Name: Give the name for your project Click Finish. In your Project Explorer, all the necessary files will be automatically generated. Inside the root folder, there will be an XML file auto-generated called  pom.xml . About pom.xml: POM stands for Project Object Model It is an XML file that contains information about the project and configuration details used by Maven to build the project. When running a task, Maven looks for the pom.xml file in the directory. I...
OPEN

How To Create A Hibernate Project in Maven

Image
In this post, I will be showing you how to create a Hibernate project using Maven and how we can add MySQL dependencies to it. Here, is a whole process picture which you can click and follow the steps. The direction of the process has been indicated by arrow icons. Now, configuring the Hibernate XML file: Inside your project folder, right-click on 'src/main/java' and select New > Other... > Type filter text: xml > Under XML folder, click on XML File > Click Next > Under File Name, type: hibernate.cfg.xml > Finish. Inside this hibernate.cfg.xml file, we would now need a dtd line. dtd stands for 'document type definition'. It defines the tagging structure of an XML document. For this, search on Google or any search engine: hibernate dtd. Find for the result that says "Index of /dtd - Hibernate". Click the link or go to  https://hibernate.org/dtd/  . On the next page, click on either of these three links. A dtd file will be downloaded. Open the ...
OPEN