How do I Create a Multi-Level Navigation System for an Agriculture App?

MIT App Inventor Help
1

Screenshot_20250212_220932_Drive
Screenshot_20250212_220932_Drive1080×2400 185 KB

My blocks
My blocks2241×1270 389 KB

Hello,
I'm trying to make a agriculture app for my school project.

:beginner:App Structure like this:

  1. Home Screen: Displays a grid-style or Listview menu of main crop categories with icons (e.g., Grain Crops, Vegetables, Spices, Leguminous, Fruits, Root Crops, Oilseed Crops, etc.).

  2. Crop Selection: After selecting a category, a list of crops with icons within that category appears (e.g., Vegetables → Carrot, Tomato, Lettuce, Cucumber, etc.).

  3. Pests & Diseases List: After selecting a crop, users can view a list of common pests and diseases affecting it, with names and thumbnail images (e.g., Brinjal → Bottom Rot, Damping Off, Aphids, Eggplant Lace Bug, Powdery Mildew, Stem Rot, etc.).

  4. Detailed Information: When a user selects a specific pest or disease, they can see detailed information, including:

    • Photos
    • Symptoms
    • Causes
    • Preventive Measures
    • Treatment Methods (Organic/Traditional & Chemical Control)

But I don't know how to do this correctly, :pleading_face: Can anyone point out the problems with my block arrangement?

And is there any tutorials or aia files like this kind of hierarchical structured app, please kindly share with me. It was huge help

Thank you in advance!

2

Here's a collapsible ListView you can load with your tree structure:

blocks
blocks948×8806 1.03 MB

collapsibleStructView.aia (14.4 KB)
sample run

1 Like
3

Here's another approach:

(text only)

1 Like
4

Do you need to draw that diagram with the colored boxes and connecting lines from an input JSON text?

If you haven't done so yet, now is a good time for an introduction to JSON:

1 Like
5

Thank you I'll try those. :+1:

6

On further thought, Your app could also be done as a three table filter.

The three tables would be

  • crop (name, growing conditions, picture)
  • insect (name, regional preferences, picture)
  • vulnerability (crop name, insect name, vulnerability level)

That would let you ask questions like

  • Which crop has the fewest vulnerabilities to this insect?
  • Which insect(s) affect this crop?

Learn to use the advanced list blocks and learn how to load your tables from CSV files in your Media folder.

1 Like
7

I'm not asking any questions through the app. App for just for read.

I updated the post with my app structure i want to create.

8

The new organization would be:

  • crop categories (category name, icon file)
  • crop (crop name, category name, icon file)
  • vulnerability (crop name, pest_or_disease name)
  • pest_or_disease (pest_or_disease name, icon file, Symptoms, Causes, Preventive Measures, Treatment Methods (Organic/Traditional & Chemical Control))

Start with a ListView (image and maintext) to select a crop category.

After category Selection, make that invisible and show the Selection in a Label, followed by a second ListView of crops, filtered by category. Load the Elements from the crop table, filtering just the crops in that category.

After crop Selection, hide the second ListView and show the crop Selection in another Label.
Use the crop Selection to filter the vulnerability table to show the pests or diseases that affect that crop. Load that into yet another ListView, hiding the previous ListView as before.

The final ListView should have the pests or diseses for just the selected crops. Selecting one should hide the ListView and expose a Vertical Arrangement of Labels and images loaded from the pest table row for that pest. Alternatively, you might try a WebViewer loaded from a Media folder html page for that pest, which I am not sure works or not but could hold lots of text.

So that's a stack of ListViews, visible one at a time, and maybe a WebViewer or some Labels and images.

1 Like
9

Sample code for loading multiple csv tables at startup:

1 Like
10

An alternative single table navigation and filter structure:

1 Like
11

Thank you so much for the instructions. :sparkles:

But, I dont know how to arrange blocks for listviews. I mean how to load the Multiple data to list view (image and maintext) and remove them. And load another list. Do you have any tutorials about how to work with listview, please share.
Thank you.

12

See the Introductory section for how to learn to use lists.

ListView Help page:
https://ai2.appinventor.mit.edu/reference/components/userinterface.html#ListView

Use blocks to load MainText and Image to Elements:

AddItem(mainText,detailText,imageName)
Add new Item to list

1 Like
13

Thank you. :slightly_smiling_face::+1::sparkles:

14

You could create lots of lists, then use three listviews to make hierarchical selections

image

multiLevelNav.aia (2.9 KB)

(only works for Tomato>Fusarium Wilt>Symptoms)

1 Like
15

Thank you. I'll try this.. :sparkles:

16

Thank you very much for the AIA file you provided earlier; it was very helpful to me. (The other tutorials provided were also helpful)
I made some changes to fit my desired structure and updated it to some extent.

Could you please check the blocks and let me know if the layout is correct?

Also, I would appreciate any ideas for updating the data on the last screen (detailed information screen)

Thank you!

blocks (5)
blocks (5)1549×1476 368 KB

NEW_multiLevelNav.aia (254.7 KB)

17

It was really a demo for display purposes (the three listviews)

IMHO, you would need a better method than "lots of lists" (e.g. a relational database / sqlite), or one of the many suggestions @ABG has made.

18

You are at the point where you need some real data for your app, to feed those tables.

Do you have any web sites that can be scraped for crop and pest data, or better yet, downloadable CSV tables?

If not, you will have to enlist team mates to type data into Google Sheets for the various data, to download into your Media folder as csv files.