#20 Lucky Draw App

Project Showcase
1

Hi guys.
I’m using this category to show my progress from my new app.
I hope you guys like it. :wink:

4 Likes
2

How it works :

  • User select any number from inlist
  • Those numbers are added to History tab
  • With option in inlist has it own row number.
  • With option has a timer. With user has some hours to complete the payment before those selected numbers expire.
3

#1 Inlist with options.
Here i got into a problem, row numbers.
When you have google sheets you have a option using row() function.

So as a counter-measure I have to find a way to get those numbers automatically.

How I did it?

  • Added a ROWID to which row item.
  • Added a LOOKUP column, related to which ROWID at that specific glide table.
  • Added a ARRAY > FIND.ELEMENT.INDEX column : here I get numbers starting from zero(0).
  • Added a MATH column, here I sum the previous result (index) + 1.

image
image970×424 97.4 KB

image
image1024×432 90.4 KB

image
image964×638 77.5 KB

image
image1024×556 92.2 KB

RESULT :

image
image1024×636 92.6 KB

2 Likes
4

#2 Get selected INLINE LIST option to a different glidetab.
There are some tuturials, but i couldn’t understand much.

How I did it:

  • Added a DATE/TIME column: One at NUMBERS table, another at HISTORY table.
  • Added a RELATION column in between those glide tables.
  • Added a TEXT column: here I used an ACTION to write USER.ID from USERS glide table.
  • Used a ACTION to write to HISTORY table using selected option from INLIST LIST.

image
image1024×374 52.4 KB

image
image

5

#3 SELECTED OPTION FROM INLIST

  • After selection, the number is not listed.
  • The green button appear.
  • Added a RICHTEXT BOX with css at all those tabs: Here I hidden the top, where the user had access to the MENU.

Since I not using a FORM at the button, I built another TAB. Which I occult it at MENU tab.

image
image1024×626 86.8 KB

image

<pre><span><style>

[id="tabBar"]{
display: none;
}

[data-test="glide-app-bar"] :nth-child(1) {
display: none;
}

#app-root div[opacity='1'] {
color: transparent;
}
6

#4 SHOPPING CART TAB
Here is a simple GLIDE tab.

  • Added a SWITCH at the top.
  • Added some TEXT ENTRY fields, IMAGE PICKER and a HINT at the bottom.

The SWITCH is for the user to see different DATA, I don’t like to be so full of infos at a single screen.

image
image1024×638 74.8 KB

image
image1024×636 81 KB

The other DATA using the SWITCH was a boolean to show…

  1. Count of how many numbers were selected.
  2. Which numbers the user selected.
  3. Price by number.
  4. How much your purchase was.
  • Added two buutons:
  1. ACTION, CLIPBOARD to copy the PIX key.
  2. FLOATING button to GO BACK to the previous screen.
  • Also a HINT, so the user can know how things work.
8

Hello @firozkhanuk1214, I will post it soon.
I have being modifying it, so for now its not in working order.