Update Service Status using Wix Workflow on frontend

Hey people, how are you?

I’m kinda experience with Wix/Studio, but medium knowledged at the Velo stuff. And i wanted to do something that might require some help from the experts =P

So, here’s the thing. One of my websites uses a well configured Workflow so our clients get updates on each stage of the service provided. Some users are somewhat … dorks … and for some reason, doesn’t use the email that much.

I’d like to fix this using a page to display the stages of service, just like the picture below:

I think of using the user login to fetch his email, then creating a page that requires the user to be logged in. After that, use a code to search for the card, and then somehow update with pictures for the status (Greyed out on non-reached status, colored on the reached ones)

Do you guys think this is possible with current API? Any tips a expert can give me?

Many thanks!

Yes, this is doable.

  1. User logs in.
  2. You grab the current-user-data (including email).
  3. You have a sepparated DATABASE where you store the STATUS ??? → If so, you grab the ID of user. In your STATUSDATABASE each collected status has also a → USER-ID / or email-if you want.

So grabbing either the e-mail or the user-id of current logged-in user and searching for this value inside the STATUS-DATABASE.
4) The STATUS has been found inside the STATUS-DATABASE for the current logged-in-user.

Your STATUS should be in best case an → OBJECT ← holding all the needed values for a STATUS.

like…

const status = {
    os_criada: true,
    servico_execucao; true,
    and_so_on: false,
    and_so_on: true,
    and_so_on: false    
}
  1. The last thing you will need will be a repeater → where you will send data to, to show the visual output.

Thanks for your help, Dima. I think i can pull this out. My only doubt is about the step 3.

This sepparated Database, it is supposed to be automatic? If so, can you give me a north on how to create it? Even a Doc will be greatly appreciated.

Thanks again!

I would reccomend first to generate the DATABASE and it’s structure.

What kind of data you want to collect?
What should be included inside your database?
Every good website has always a running database in the background.

Let’s call your new DATABASE (where you will store process data of a specific multistepform or whatever) —> “STATUS-DB”

Now you first make some thoughts about, which data to collect and how to structure your database, regarding the FORM you will want to connect to this database.

If your database is running automatically at the end, will depend on your coding skills and your setup.

Let’s imagine you have a MULTISTEP-FORM somewhere on your page or site, where you ask USERs for specific data, after they have logged-in. But why they have first to log in? → Because you want to collect data for each user, so you have to know who is currently visiting your website → to fill your database with the right data for the right user.

Let’s say your FORM includes data like…

-first-name
-last-name
-age
-city
-service-1
-service-2
-service-3

  • and some other data…

Now again →

  1. User logs in → you get the USER-ID
  2. User fills out the FORM and submits.
  3. As soon as user submitted → a function starts collecting all data for this specific user and all the service-states (fullfilled or not fullfilled) → writing them immediatelly to the corresponding fields inside your database → for the specific user.

So that means, you will also need a USER-ID-FIELD inside of your CUSTOM database, to make sure the data will be written for the appropirate user.

  1. Submission → completed? → Database collected the data (SAVED).

But maybe the user did not complete the form, so still some services or what ever open ? → Even if the user now leaves the website → the data is already saved.

  1. When user comes back to complete all tasks → you have another function running to check if data already exists inside database → loading all content accordingly to the last STATE —> showing an already loaded FORM for the current logged-in-user. → Now user can complete the form and again so SAVE the current state of the entered DATA.

…and so on… and so on… and so on…

Like already before, i would recommend to work OBJECT-ORIENTED → that means you work as most as possible with OBJECTS… like shown here…

const status = {
os_criada: true,
servico_execucao; true,
and_so_on: false,
and_so_on: true,
and_so_on: false
}