App pages overview

Mathangi
9 days ago

Application pages

Kissflow Apps pages assist you in creating interactive interfaces for your application. You can create multiple pages, associate them to different user roles, or even restrict users based on permissions. As an application owner, your main objective is to collect data from your users and also showcase the collected data aesthetically using different components of your choice. It allows you to measure, monitor and manage any information you've collected.

Pages allow you to extract and aggregate data, convert it into manageable chunks of visual information, and create a detailed overview of your collected data on a single screen.

Creating pages

Access the development environment of your application and launch the application builder.
In your application toolbox, click Pages > Create a page.

The visual intuitiveness of a page is its distinguishing feature. Pages display data in a variety of system components such as buttons, labels, cards, images, workflow reports, embedded iFrame links, and so on. You can also create custom components, use input parameters, or use custom JavaScript code to interact with different pages and components.

Let's take an example of an Order Management application. Here, a page can be used to create an interface for your application, that displays:

Customer Scorecards
Customer order form
Backlog orders
Sales performance
Customer payment trends
Gross profit metrics
Top customer orders

The data displayed on the page changes depending on who is viewing it. Different roles search for different types of information on the fly. An application does not necessarily need a page as a dashboard full of information, but rather many different pages with only relevant information based on the use case, catering to a specific audience.

A sales agent, for example, will simply disregard the delivery trend report. This information on their page is meaningless. When, in fact, information such as sales trend, leads information, and so on are important to them.

Types of supported components

You can build pages for your application using components including:

iFrame
Card
Image
Button
Label
Tab
Report
All items component
My items component
My tasks component
Processes
Boards
Master details component

Each of these elements can be used to demonstrate a specific business standpoint. As a result, a page can be built with one, many, or all of the above-mentioned components.

Page components	Description	Representation	Use cases
Card	A container that looks like a tile and is used to display key metrics. Cards show metric aggregate such as count, as well as custom text.		A card can be configured to display important data like, the available assets available, cost of available assets, or pending requests with the admin staff.
Label	A container where a custom text label can be inserted. You can adjust the style: font size and font weight, align content and layout.		A label can be used to add a specific text label for your page. For instance, you may have different sections in your page and you can use different text labels to identify these sections.
Data forms	A custom form can be used to collect data directly from the page. There are no workflow steps for data forms.		You can include commonly used workflow forms on your page to facilitate quick submissions. For example, you can add new assets to your asset catalog through the asset form embedded on to your application page.
Processes	Processes are the most structured form of work. It will have a form for data collection and a set of predictable steps that can be programmed and automated.		A process form can be used to set up an approval flow. For instance, you can initiate an asset request approval flow through a process form.
Boards	Boards are flows with less structure in which users have complete control and can have various resolutions at any point.		A board form can be used for a wide array of project management and case management use cases. For instance, you can track any support tickets related to failed or faulty assets disbursed by your company through the board form embedded to your application page. You can also closely monitor and close these items using this application.
System reports	A workflow report can be inserted as a component into your application's pages. Inserting a report into the page will provide you with a detailed summary of your workflow data.		Workflow reports can be generated and shared to show elaborate information on multiple dimensions. For instance, you can create tabular, chart, and pivot reports as part of your process and board forms. These reports can then be embedded inside pages.
iFrame	Sharable iFrame links can be embedded to create a component for a page.		Sometimes, you might want to add something more to your page, than the pre-defined components we have provided. You can use the iFrame component to add URL to embed multimedia and external web pages to your application.
Button	Use the button to redirect to a new page or launch a popup window.		A button can be added to point you to a different page or launch a popup based on specific on-click events. You can also use a JS code on your button component to execute specific actions within the page.
Image	Import images as a background or a separate asset of a page.		Make a specific announcement to the users of your application by inserting a banner image onto your page. You can import an image from an external URL or upload an image from your local machine to view this on your application.
Tab	A container where you can create a horizontal navigation bar with individual tabs pointing to different pages in your application. It basically lets you create a secondary navigation for your application.		Tabs are great to provide lots of functionality in a limited space. Using tabs component, you can create a horizontal tabbed interface that can offer easy access to different pages.
Custom component	Custom components allow you to create and customise specific features, redesign the interface of your app, and even embed an external application to your pages.		You can build additional features and components using Kissflow Apps SDK. You can also build a React JS, Vue JS, or Angular JS applications using our SDK and import it onto your application's pages.
Master details	A container where you can add standalone vertical tabs and add unique page links for individual tabs. Each tab will be linked to a field in your data form or dataset. It basically lets you create a secondary navigation for your application.		Tabs are great to provide lots of functionality in a limited space. For instance, you can add a left navigation bar using this component.