Read Blog Post

Read Blog Post

Contributed on July 24, 2023

7

116

Portal Application

Blog: Comidor Blog

Comidor platform offers you the ability to design your own apps through App Designer, with low code. Making a simple application is easier than ever, even for non-developer users. Comidor guides you with simple steps, in order to publish your app.

There are various types of applications provided in Comidor App Designer. You can choose the one that fits better your needs from the following options:

1. Table applications: 
   • Sequential apps (with workflows)
   • Process-based workflow apps
   • Simple non-process-based apps (Data-driven)
2. Report applications
3. Kanban applications
4. Portal applications

Let’s see step-by-step how to create and run a portal application.

Portal Application

Enhance user experiences with this cutting-edge feature and empower your business to effortlessly build dynamic and personalized portal applications, captivating your audience and revolutionizing their interaction with your business.

Effortlessly design responsive portal applications through Comidor App Designer. Choose from an extensive array of components such as text, labels, images, links, buttons, tables, grids, and more. Simply drag and drop these elements onto the canvas, arrange them to your liking, define the desired style, and easily associate components with specific properties. Preview your design live as you build your portal. Our powerful designer puts you in complete control, making the creation of portal apps a breeze.

Access App Designer

In order to access App Designer go to the main menu on the left side of your screen and select the icon App Factory > Application Builder > App Designer

In the new unit that opens, click on the button Create an App.

Create App

• Click on the “Create an App” icon to open the creation form.

• In the Application Type select Portal App.

• Give the Application Name.
• Choose from the list or add a new Menu Header option. Based on your selection your app will be displayed in the respective menu header with a new icon. If you leave it empty it will be included in the packages menu header.
• You can also classify your app in a proper Category. Choose one Category from the existing options, or make a new Category. Categorization helps you find easier your apps in the App Designer. Based on the category you choose, the app is also displayed on the respective sub-menu.
• Collaborators are the users or groups that have access rights to this App. Choose one or more users(s), Group(s) from the list.
• Check the option Is Public? in case you would like to make this portal public and accessible to non-comidor users. A public URL will be produced in step 6. If left unchecked, the portal app will be accessible only from the menu inside the platform to Comidor users.
• There is an option to upload an Image for your App.
• Click Save to create your App, or Close to cancel.

Once you save your app, you will be redirected to the view form. Comidor guides you through simple steps to design your App. Steps 1, 4, and 6 are available for this app type.

1. Dashboard

In the step Dashboard, you get an overview of your application. In particular, you are able to view:

• Basic Info:
  • the Type, Category, and other parameters
  • You can click on the pencil button to edit the above info
  • You can lock your app by checking on the Locked option. With this option, only the user that locks the app will be able to edit the app (in all steps). All the rest users will just be able to view the app, but can not edit it.
  • By checking the Has customizations option, the application will not be exportable.
  • Put a flag to remember if this application Has application parameters.
• Collaborators: the users or groups that have access rights in this App.
• Comments: an area where users that have access can write and view comments.

4. Advanced

Get the most out of the App Designer with this advanced options step by including Data Objects and Event Scripts in your portal app.

Data Objects

Data objects refer to discrete units of information that are structured and organized within a computer system or database. When we refer to a “data object,” we essentially mean that this particular set of data should be considered an independent entity. Data objects come in a variety of forms, including data tables, lists, forms, pointers, records, files, and sets.

With data objects in Comidor App Designer, you can power up your event scripts in any app and quickly and easily create any type of data set you need.

• Click on the “+” icon to create a new Data Object
• Create data sets, variables, lists, forms, records, or action data types and define their properties.
• Use those data objects in event scripts.

Event Scripts

In this tab, you are able to write scripts for a certain Data Type to be executed before/after/on a specific event.

Click on the “+” icon to create a new Event script:

• Add the Procedure Name.
• Choose the Data Type (apprec, task, process, dataset) and define where you want the script to be applied.
• An Event Type can be inserted, updated, deleted, etc.
• In the Procedure Body add your code.
  •  This is for advanced users to write their procedures.

6. Template

In this step, you can set up your Portal template by defining all the elements, styles, CSS and Js functions you wish to be included.

Layers

• On the left side of the template designer, you can see the available Layers that you have already included in your template design. Click on the layer you wish to edit and respective options will appear.

Actions in the design

• Choose the preview of your portal design between Desktop, tablet, or mobile.
• Click on the Save icon to store all your latest changes.
• The refresh icon will show you the preview of your portal application design with your latest changes.

• Click on the View Components, and all components will be highlighted with a dotted border.
• Get a preview of the Portal application by clicking on the preview icon. Return back easily to the edit mode, by clicking on the respective icon.
• View the code of your portal template design. A pop-up appears where you can see and copy the code. Click on the x icon to close the pop-up.
• Import the code of your portal template design. A pop-up appears where you can type or paste the code. Click on the Import button to apply this code in your portal template. Click on the x icon to close the pop-up.
• Toggle or Show all images in your design.
• Undo or redo your latest changes.
• Click on the bin icon to clear your canvas.
• For a better design experience toggle to fullscreen.

Blocks and Style Manager

• Click on the + icon at the right side of your screen and drag-n-drop one or more blocks in your portal app template design. The following options are available:
  • Basic blocks: Label, Button, Div, Text, Image, Input, Textarea, Select, Check, Radio, Link, Text section.

• • Table blocks: 1 Column, 2 Columns, 3 Columns, 2 Columns 3/7, 1 Section, 1/2 Section, 1/3 Section, 3/7 Section.

• • More: Video, Map, Tabs, Custom Code, Tooltip, Form, Divider, Grid Items, List Items.

• After adding a block, you can click on the gear icon to apply settings. Each component might have different settings.

• Choose a block and then click on the paintbrush icon to open the Style Manager

• • Add Classes
  • Define General options
  • Dimension options
  • Decorations options
  • Extra options
  • Flex options

• Seamlessly incorporate custom CSS and JS within the App Designer, enabling in this way endless possibilities for personalization and enhanced functionality as you build your portal app.

Publish

Once your design is perfected, click on the Publish button in order to Publish your app.

Your app is instantly published, and the HTML design is generated seamlessly. Access your portal effortlessly using the external URL conveniently located above the designer canvas.

Share this public URL with your clients or vendors to involve them in your internal processes, or embed it to your website.

Edit Apps

If you want to edit an existing Portal Application, go to the main menu on the left side of your screen and select the icon App Factory > Application Builder > App Designer. From the list of applications, select the one you wish to edit.

• Click on the pencil button to apply any changes to the Basic info of the Portal application.
• You can navigate through steps 1-6 by clicking on the respective step and applying any change you wish. Do not forget to publish your changes.
• Click on the Actions button and choose Export if you want to export the current application.
• You can delete a User App if you wish.  Open the App you want to delete, and from the actions button, click on the Delete option.
  • A confirmation pop-up appears. Click Confirm to proceed with the deletion or cancel.
  • You can also check the Linked Entities that will be affected in the respective tab.
• Finally, you can choose the copy option to copy the current application. A pop-up appears where you can define the application name of the copied app.

Run App

You can see the result of your Portal Application after publishing your app, either by navigating through the main menu or by using the Public URL (as shown in step 6 of App Designer).

Find out more about App Designer and how to create other app types here.

The post Portal Application appeared first on Comidor Low-code Automation Platform.