Portal Application

Comidor platform offers you the ability to design your own apps through App Designer, using low code. Creating a portal application has never been easier, even for non-developer users. Comidor guides you through simple steps to help you publish your portal app.

Comidor App Designer offers a range of applications to cater to different needs. You can select the one that best suits your requirements 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 explore a step-by-step guide on how to create and run a portal application.

Portal Application

A portal app serves as a gateway or entry point for employees, customers, partners, and other stakeholders, to access a wide range of services, information, processes, and functionalities allowing them to interact seamlessly with your company. A portal can take various forms, such as an employee self-service portal, a customer self-service portal, or a vendor self-service portal. These apps often provide personalized experiences by allowing users to customize their preferences, settings, and the design of the portal.

Comidor platform is revolutionizing the way businesses create portal applications with its user-friendly and visually appealing user interface. Users have the ability to create both public portal sites, which can be accessed by non-Comidor users, and internal portal apps that are accessible within the Comidor environment.

When designing a portal app, you have a wide range of components to choose from. These include text, labels, images, links, buttons, tables, grids, and more. Easily drag and drop these elements onto the canvas, arrange them according to your preferences, define the desired style, and effortlessly associate components with specific properties and data actions. You can even preview your design live as you build your portal.

Access App Designer

To access App Designer, navigate to the main menu on the left side of your screen and select the following options: App Factory > Application Builder > App Designer

 

 

In the newly opened unit, click on the “Create an App” button.

 

Create App

• To open the creation form, simply click on the “Create an App” icon.

• In the Application Type, select “Portal App”.

• Provide the Application Name.
• You can either choose from the existing options in the list or add a new Menu Header option. Depending on your selection, your app will be displayed in the corresponding menu header with a new icon. If you leave it empty, it will be included in the packages menu header.
• You can classify your app into a proper Category. Choose an existing category from the options provided or create a new Category. Categorization helps you easily locate your apps in the App Designer. Depending on the category you select, the app will also be displayed in the respective sub-menu.
• Collaborators are the users or groups who have access rights to this App. Choose one or more users(s), Group(s) from the list.
• Check the “Is Public?” option if you would like to make this portal accessible to non-Comidor users. By doing so, a public URL will be generated in step 6. If left unchecked, the portal app will only be accessible to Comidor users through the platform’s menu.
• There is an option to upload an Image for your App.
• Click “Save” to create your app or “Close” to cancel.

After saving your app, you will be redirected to the view form. Comidor will guide you through simple steps to design your app. Steps 1, 4, and 6 are available for this app type.

 

1. Dashboard

In the Dashboard step, you will get an overview of your application. Specifically, you will be able to view:

• Basic Info:
  • the Type, Category, and other parameters
  • To edit the above information, simply click on the pencil button.
  • You can lock your app by selecting the “Locked” option. By enabling this feature, only the user who locks the app will have editing permissions in all steps. Other users will only be able to view the app but will not be able to make any edits.
  • By selecting the “Has customizations” option, the application will not be exportable.
  • Add a flag to remember if this application Has application parameters.
• Collaborators: the users or groups who have access rights in this App.
• Comments: an interactive area that allows users with access to write and view comments.

4. Advanced

Maximize your use of the App Designer by taking advantage of this advanced options step. This includes incorporating Data Objects and Event Scripts into your portal app, allowing you to enhance its functionality and customization.

Data Objects

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

With data objects in Comidor App Designer, you can enhance the functionality of your event scripts in any app. It allows you to quickly and effortlessly create any type of data set you require.

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

Event Scripts

In this tab, you ψαν write scripts for a specific Data Type to be executed before/after/during a specific event.

To create a new Event script, simply click on the “+” icon:

• Add the “Procedure Name“.
• Select the Data Type (apprec, task, process, dataset) and specify where you would like the script to be applied.
• An Event Type can be inserted, updated, deleted, etc.
• Add your code to the Procedure Body.
  •  This is designed for advanced users to document 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 include.

Layers

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

Actions in the design

• Select the preview of your portal design: Desktop, Tablet, or Mobile.
• To store all your latest changes, simply click on the Save icon.
• The refresh icon will display a preview of your portal application design, reflecting your latest changes.

• Simply click on the “View Components” option to highlight all components. This will apply a dotted border around each component.
• Get a preview of the Portal application simply click on the preview icon. Easily return to the edit mode by clicking on the respective icon.
• To view the code of your portal template design, simply click on the designated area. A pop-up will appear, allowing you to see and copy the code. When you’re done, just click on the “x” icon to close the pop-up.
• To import the code of your portal template design, simply follow these steps:
  1. Locate the pop-up window where you can type or paste the code
  2. Click on the Import button to apply the code to your portal template.
  3. If you wish to close the pop-up, click on the “x” icon.

• Toggle or Show all images in your design.
• Undo or redo your most recent changes.
• To clear your canvas, simply click on the bin icon.
• To enhance your design experience, toggle to fullscreen mode.

Blocks and Style Manager

• To add blocks to your portal app template design, simply click on the + icon located on the right side of your screen. You can then drag and drop one or more blocks onto your 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 may have different settings.

• To open the Style Manager, simply choose a block and click on the paintbrush icon.

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

Custom CSS and JS

• Easily incorporate custom CSS and JS within the App Designer to unlock endless possibilities for personalization and enhanced functionality as you build your portal app.

---

Publish

Once you have perfected your design, simply click on the Publish button to Publish your app.

Your app is instantly published, and the HTML design is seamlessly generated. Access your portal effortlessly by 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 on 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.

• To apply any changes to the basic information of the Portal application, simply click on the pencil button.
• You can navigate through steps 1-6 by clicking on the respective step and making any desired changes. Do not forget to publish your changes.
• To export the current application, simply click on the Actions button and select Export.
• If you wish, you can delete a User App. Simply open the App you want to delete and click on the Delete option from the actions button.
  • A confirmation pop-up has appeared. Click “Confirm” to proceed with the deletion or click “Cancel“.
  • You can also check the Linked Entities that will be affected in the respective tab.
• Finally, you have the option to choose “copy” to duplicate the current application. A pop-up will appear, allowing you to define the name of the copied app.

---

Run App

You can view the result of your Portal Application after publishing your app by either navigating through the main menu or 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.