App Builder Tutorials

00:00: This article explains how to build the Supplier Portal app using the App Builder.

00:04: You will learn to create the app,

00:06: add resources, test functionality, and publish the initial version.

00:11: In the last session, we created workflows and tables needed for the Supplier Portal

00:15: app.

00:16: Now, in this tutorial, we will build the Supplier Portal app using the App Builder

00:21: by using the resources.

00:36: Enter your application name to identify the new Supplier Portal app within the App

00:41: Builder environment.

00:42: Choose the connection, provide a description, and optionally select a label. For the

00:47: initial version,

00:48: create the app with just a table to serve as the landing page listing all suppliers.

01:24: Click the Create button to finalize the initial configuration and generate the

01:28: Supplier Portal app structure.

01:32: The app builder is now in build mode with one resource: the table containing all

01:36: supplier details.

01:38: Begin by writing your first prompt to guide app creation.

01:48: Use the Alias name to compose and send the first prompt that will instruct the app

01:53: builder on the supplier portals functionality.

02:26: The app builder processes, The Prompt and stars, building the supplier portal

02:29: application wait until the process completes before sending a new prompt.

02:42: The application creates a landing page displaying a list of suppliers.

02:46: You can search suppliers by number or name, providing an initial version of the app.

03:22: Save the current version of the app and exit

03:24: build mode to add additional resources necessary for further development of the

03:28: Supplier Portal.

03:35: Exit build mode and enter preview mode to examine the app's look and feel, including

03:40: sorting capabilities on columns.

03:56: To enhance the application, add other resources such as workflows that will

04:00: support the Supplier Portal's functionality.

04:12: After selecting a supplier, retrieve all purchase heads for that supplier.

04:17: Then select a purchase head to view its line items.

04:20: Use these workflows to build this functionality.

04:37: Assign an alias name to the new resources and click Apply to include them in the

04:41: app.

05:01: With the new resources added, continue building the app by entering a new build

05:05: session to expand functionality.

05:28: Begin prompting to add the ability to search for suppliers.

05:31: Once the supplier is selected, retrieve all purchase.

05:35: Heads associated with that supplier.

05:45: Confirm the use of the specified workflow to retrieve purchase heads for the

05:48: selected supplier.

06:02: Enter a prompt describing navigation from the supplier selection to a new page

06:06: showing all purchase heads for that supplier, using the appropriate workflow.

06:10: The app builder interprets the prompt and creates navigation to view all purchase

06:15: heads for the selected supplier.

06:44: Test the updated Supplier Portal app to verify that all functions, including

06:48: supplier search, are working correctly.

06:58: Enter a supplier identifier to search for a specific supplier within the app.

07:03: Navigate to the page displaying all purchase orders associated with the selected

07:07: supplier.

07:20: Utilize the quick filter to refine purchase orders and use navigation options to

07:25: return to previous pages.

07:33: Click the supplier search field to enter a new search query.

07:38: Enter the initial characters of a supplier identifier to begin searching.

07:42: Add functionality to retrieve line items for each purchase order header to enhance

07:46: the app's detail view.

08:02: Enter a prompt instructing the app to get line items for a selected purchase

08:06: order header using the specified workflow.

08:09: Check resource information to confirm alias names, such as the list for line items,

08:13: before making changes.

08:39: Apply changes to the top section of the application to incorporate new features or

08:44: updates.

09:03: Confirm that the recent changes have been applied to the application successfully.

09:44: Verify that purchase orders for the selected supplier are visible and that

09:48: clicking a purchase head displays its line items.

10:00: Note that progress has not been saved yet, and a prompt suggests saving your work.

10:08: The initial version of the app is functional, allowing supplier search, viewing

10:12: purchase orders, and displaying line items for each order.

10:32: Save your work and exit build mode to finalize the initial version of the Supplier

10:36: Portal app.

10:43: Click the Save button to store your current app configuration and changes.

10:49: Click Yes to confirm saving your progress and exiting build mode.

10:53: Preview the application to see how it appears on different screen sizes and devices.

11:28: Click to open the device selection menu for previewing the app on various devices.

11:34: Choose MacBook to preview how the app looks on a laptop screen.

11:38: Select Full HD resolution to view the app in high-definition on the chosen device.

11:44: Choose iPad Mini to preview the app on a tablet-sized screen.

11:49: Click to open options for changing the screen orientation in the preview mode.

11:54: Flip the screen orientation to check the app's appearance and usability on mobile

11:58: devices in different orientations.

12:03: Click a supplier entry to view detailed information or related data within the app.

12:09: Click a purchase order number to view its details and associated line items.

12:14: Click the purchase order number again to confirm selection or view additional

12:17: details.

12:19: Now you have a fully functional initial draft version of the Supplier Portal app

12:23: ready for publishing.

12:30: Click Publish, name the version (e.g., version 1 Supplier Portal) and save it to

12:36: make the app available to users.

13:00: Access the published app from the app library and run it via menu or by clicking the

13:05: app icon.

13:33: Favorite the app

13:34: so users with permission can easily find it under the dropdown menu.

13:50: Click the button to add the app to your favorites for quick access.

13:54: Run the Supplier Portal app directly from the app library to begin using it.

14:00: In this tutorial, we've learned how to use resources to create the Supplier Portal

14:04: app.

14:05: Next, we will enhance the app to confirm purchase heads.

14:18: We will also add capabilities to confirm line items in future

14:21: updates. Thank you.

14:23: This article guided you through building the Supplier Portal app using the App

14:27: Builder, covering setup, resource addition, functionality testing, and publishing. For

14:33: more information, explore related articles on app enhancement and workflow

14:37: integration.

00:00: This article explains how to enhance the Supply Portal app by adding purchase order

00:04: confirmation features.

00:05: You will learn how to create new app versions, add workflows, and manage app

00:10: stability effectively.

00:12: In the last version, we created the initial version of the Supply Portal app and

00:16: published it.

00:17: We will now continue to add more features to the Supply Portal app

00:21: so that we have the capabilities to confirm a purchase order head or a line item.

00:37: Now to edit a published app, press the kebab menu and choose the edit option.

00:42: This will take you to the published version of the current app.

00:45: If you see that you're not allowed to make changes on the published version, doing

00:49: so will impact the current version published to users. You are allowed to create a

00:53: new version from the published version.

00:55: I will go ahead and create a new version.

01:15: So we will use the same generator app that we had before. We use the same connection

01:20: for the AI assistant.

01:21: We now will give a version 2 of the Supplier Portal app as a description. We will

01:27: use the same resources that we had before, meaning that we will use the same tables

01:31: and same workflows from the previous version.

01:34: We will use the same app that we created from the previous version.

01:38: We will leave the remaining rest as same and then create the app.

01:59: We now have a new version, which is in draft mode.

02:01: Now we are allowed to make changes or build onto the existing application.

02:11: In this session, we are targeting to have confirmed head and confirm line item for a

02:16: supplier.

02:17: So, we will have a confirmed head and a confirm line option.

02:34: To do that

02:34: now, I will go ahead and add a few more resources which allow me to confirm head and

02:39: confirm line item.

02:41: I now need the workflow confirm all and confirm line. I

02:44: will go ahead and try to queue an alias name and click apply.

03:10: I now have the new resources that I need to start building and add the capabilities

03:14: of confirming head and line items.

03:17: I will now go to build mode.

03:27: All right.

03:27: Now let's see if we have retained the same functional application as the published

03:32: one.

03:43: So we will try to understand and test if everything is working as it should from

03:47: the initial version. We are able to search

03:50: the supplier, get the purchase order heads, and also get the purchase line items.

03:54: We have everything that was working from the previous version.

03:57: Now we will add the capabilities to confirm head and confirm line item.

04:01: I will now prompt it to have the confirm all button for the purchase order heads.

04:17: Selecting a purchase order head and updating the purchase order respectively.

04:48: It is also giving you the list of items that it is going to make changes to your

04:51: purchase supplier portal app.

05:14: It has made the necessary changes.

05:16: Let's try to test it.

05:20: Select the supplier from the list to proceed with purchase order confirmation.

05:25: Select the purchase order number to view its details and line items.

05:30: Let me select a purchase order.

05:32: Now I can see that I have a button to confirm all, meaning that all these purchase

05:36: lines are going to get confirmed.

05:38: Let me go ahead and confirm all.

05:50: We now see that the status is confirmed.

05:53: Now I would like to have the line items updated and also get a confirmation for

05:57: confirm all.

06:00: All right,

06:00: now let's see how the changes have been applied.

06:14: Select the supplier from the list to review updated purchase orders.

06:19: Me now choose a different purchase order

06:21: and now I am going to confirm this.

06:28: Now it's asking me for confirmation, and I see that the record is processed and

06:32: updated.

06:32: I also have a confirmation message here.

06:48: The line items confirmed.

06:49: I can also ensure that by looking into my logs for the last executed workflows.

06:54: I now have my confirm all.

07:17: Go ahead and also have a confirm button for the line items.

07:23: We now have the changes that are applied.

07:36: Now we go ahead and test the line item.

07:37: I select one header and see a button line item.

07:40: I select one row. Now I can confirm a line item.

07:59: I also see that it is able to confirm it.

08:01: We now see that we have the capabilities to confirm head and also confirm a line.

08:15: The simple supply portal that we are able to create.

08:17: I will now save my work.

08:25: Click Yes to confirm

08:26: saving your work.

08:29: Now see that we have the saved version.

08:38: Refresh the app view to load the latest changes.

08:42: I can also refresh and test my changes.

08:45: Now I will exit the build mode.

08:50: Click Yes to confirm exiting build mode.

08:54: Now that I have a stable version and I don't want anybody else to start making

08:57: changes on top of my last version, I can choose to archive it.

09:01: So I now have a version that I can archive so that I will not make any more changes

09:06: on top of it. And I'm enforcing to create a new version to make any more changes to

09:11: this app.

09:27: In this part we covered how to create a new version and make changes on top of the

09:31: current version, and also archive the version that you feel is stable.

09:41: This article demonstrated how to create, edit, and manage versions of the Supply

09:46: Portal app, including adding confirmation features for purchase orders and line

09:51: items. For more information,

09:52: see related articles on app versioning and workflow management.

00:00: This article explains how to add and configure in-app roles to manage user

00:04: permissions within your application.

00:05: You will learn how to create roles, assign users, and test role-based functionalities

00:10: to enhance your app's security and usability.

00:14: In the previous versions, we were able to create a supply portal app.

00:21: In this version, we will explore the app Builders capabilities in app roles where

00:25: you can now start having in-app roles for your application.

00:29: To do that,

00:29: I'm going to create a new version from my Arcade version.

00:32: Let's call this the version three.

00:36: Enter the name for the new version to identify it as the one with app roles.

00:41: Click the Create button to generate the new version of your application with the

00:44: specified name.

00:46: I just create everything the same as the previous version.

00:49: I can

00:50: now start adding an in-app rule.

01:04: Click the In-app Roles section to manage user roles within your application.

01:10: I'm going to create a new rule which we say is confirm All. And I will also try to

01:15: add another rule which says confirm line.

01:46: Click to add a new role to your application for managing permissions.

01:51: Enter the name for the new role to identify it clearly within the app.

01:55: Enter a description for the role to specify its purpose, such as users

01:58: who can confirm line items.

02:00: Click the Save button to store the new role and its settings.

02:04: Click the user role designated as the one who can confirm purchase order heads.

02:09: Now, once I'm here, I can add users that I would like to use for my confirm all, and

02:13: I will add users that I would like to use for my confirm line.

02:35: Now remember you can also choose to select roles, being the roles that you create in

02:39: Winz platform.

02:46: All the users inside the rules are going to have the capabilities to confirm line

02:50: items

02:50: in this case. Any user under the system row can now have the capability to confirm

02:55: a line item now.

03:03: I will try to save this

03:04: now. I get into the build mode of the new version.

03:16: Now I'm going to prompt it to ask creating functionalities confirm all and

03:20: confirm.

03:35: Prompt to enable the app builder for implementing in-app roles functionality.

03:40: Enter the condition to show the confirm all button on the purchase order page only

03:44: if the user has the role confirm all.

03:47: I will now ask it to make the changes and try to show the confirm all button

03:51: only if the user has the role confirm all.

04:02: Let's wait until it

04:03: does the changes needed.

04:27: We will now try to test this

04:29: version. Now see that I don't see the confirm all button anymore, but I can try to

04:34: simulate to see if I am a confirm all user.

05:00: Click to open the simulation settings to test user roles and permissions.

05:05: Click the Refresh button to reload the app and apply role changes.

05:10: Refresh this app.

05:11: Try to do the same operation.

05:13: Now I start to see the confirm all button because I am now simulating the role of

05:18: confirm all.

05:29: Let's try the same for the purchase line item.

05:38: Thank you.

06:11: Now we have the app refreshed. Let's try to find out

06:14: if you are able to hide or show the confirm line based on permissions.

06:17: I am now in the role of confirm all. I am allowed to confirm all.

06:33: Click to access the role settings for further configuration.

06:37: Now I switch to confirm line.

06:40: I will refresh the app to see the changes.

06:42: I now don't see any button to confirm all.

07:02: Click to select the purchase order for which you want to check permissions.

07:07: I can try to see if I have the permissions to confirm line.

07:09: Now I can confirm my line.

07:16: So we can have in-app role permissions for different users using the same app.

07:21: I will now save this and exit build mode.

07:24: I ensure my changes are now applied with the roles permission.

07:33: We now have a complete supplier portal app that has a list of all suppliers with the

07:37: capabilities to search supplier, to retrieve the purchase order head based on the

07:41: supplier, to retrieve line items based on the purchase heads, and also having role

07:47: permissions to do different activities inside the portal.

08:07: Click the search field to look up suppliers by number or name.

08:12: Enter the supplier number or name to filter the supplier list.

08:15: Click to select the supplier from the filtered list.

08:19: Click to select the purchase order head associated with the supplier.

08:23: Click the Confirm All button to approve

08:25: all items in the purchase order.

08:28: Click

08:28: Yes, Confirm All to finalize the approval of all items.

08:33: Click the Close button to exit the confirmation dialog.

08:36: Click to toggle the option on for the selected items.

08:40: Click to open the preview, simulate roles,

08:43: view the bridge log, and refresh the app.

08:47: Click the Refresh button to reload the app and apply any recent changes.

08:51: Click the search field to look up suppliers by number or name.

08:55: Enter the supplier number or name to filter the supplier list.

08:59: Click to select the supplier from the filtered list.

09:02: Click to select the purchase order associated with the supplier.

09:06: Click to select the specific line item within the purchase order.

09:10: Click to open the confirmation dialog for the selected line item.

09:15: Click Yes,

09:15: Confirm Line to approve the selected line item.

09:19: Click the Close button to exit the confirmation dialog.

09:23: Now I confirm my app is working as intended.

09:25: Now I'm going to publish this app, which is version 3 with app roles.

09:29: So now this will be the new version of the app the user is going to use.

09:40: So, summary of this tutorial: we have created the app to have different permissions

09:44: based on users with their roles entitled.

09:53: This article demonstrated how to create and manage in-app roles to control user

09:57: permissions effectively within your application. For more information, see related

10:02: articles on role management and app versioning.

00:00: This article explains how to manage and enhance your supplier portal application

00:04: using the Vincelive app builder. You

00:06: will learn to navigate key features such as version control, role management, and application

00:11: preview to optimize your portal's functionality.

00:15: In previous tutorials, we created workflows needed for our supplier portal.

00:20: We created an app to build the supplier portal.

00:22: We also created different versions of the supply portal and published them.

00:27: Additionally, we implemented in-app role permissions to enable users to access

00:32: features based on their roles.

00:50: In this video, we will now see the other features the app builder has. And we will

00:55: start from the menu.

01:03: Click the menu to access its features within the Vincelive app builder interface.

01:07: Interface

01:08: Notes provide your version information or a description of your

01:12: version. You can review the files generated by the AI to create the app and see the assets

01:17: it has built for you.

01:33: You can also see all your prompt histories, and you can add more roles to it and see

01:37: all the resources that you have used for this application.

02:09: Click here to access the screen preview options

02:12: You have the preview mode where you can see the preview of the application in

02:16: different devices.

02:17: You can also simulate roles to ensure that your application is working as per the

02:22: roles entitlement.

02:38: Click Bridge log to review all the requests and responses the app is processing.

02:43: We have Bridge logs to see all the requests and responses

02:45: the app is trying to do.

02:47: Refresh to update any changes you want to see in the preview.

02:57: You can also change the name of the info, your application.

03:00: You can add more descriptions and also add more tags if you need.

03:07: Back will take you back to the application library.

03:10: You can start editing the app or choose to delete it if you want to remove the app.

03:23: Thank you.

03:24: This article guided you through managing your supplier portal app using Vincelive, covering

03:28: workflows, version control, role management, previews, and application editing. For

03:34: more information, explore related articles on app building and role configuration.

03:39: configuration.

App Builder Tutorials

Learn how to build and manage simple apps on the Vince platform