Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Edit a custom menu that contains links that display at the top of the ProcessMaker Platform user interface.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Customize site design and create dashboards that display BMI and KPI metrics for stakeholders. Customize top-level menus that link to often-used links and Requests.
Customize how your ProcessMaker Platform instance displays the logo, color scheme, and font.
Customize how the user interface (UI) displays in your ProcessMaker Platform instance. The following aspects of the ProcessMaker application may be changed:
Login logo: Change the logo that displays in the Login Screen. By default the ProcessMaker logo displays.
Default logo: Change the logo that displays in the upper-left of all sidebars when the icon in the left sidebar is clicked. By default the ProcessMaker logo displays.
Default icon: Change the icon that displays in the upper-left of all sidebars. By default the ProcessMaker icon displays.
Alternate text: Optionally enter text to display if the image linked to the default logo or icon is not available.
Default color scheme: Change any of the colors that comprise a ProcessMaker Platform color scheme. Below are the default Hex-formatted color settings for each component of a ProcessMaker application color scheme and how each is used in the color scheme:
Primary: The Primary color setting affects in the following components of the UI:
All left sidebars.
The selected top menu option.
Breadcrumb links that lead to the displayed page.
Icons that display to manage ProcessMaker Platform assets, including but not limited to Edit, Configure, and Delete icons.
The Completed Request tab.
The Completed icon that represents a Request or Task is completed.
Default for the background color, text color, and button color in all Screen controls.
Default hex color: #3397E1.
Secondary: The Secondary color setting affects in the following components of the UI:
Color for all primary action buttons in pages and screens, including but not limited to the Save and Cancel buttons.
Primary action buttons in Script Editor and Screen Builder.
Default color for the Secondary option in the Variant setting for Screen controls.
Default hex color: #788793.
Success: The Success color setting affects in the following components of the UI:
The +Request button that persistently displays in ProcessMaker Platform.
The In Progress Request tab.
The In Progress icon that represents a Request is in-progress.
The Success color displays in messages that display when an application action is performed successfully.
Default color for the Success option in the Variant setting for Screen controls.
Default hex color: #00BF9C.
Info: The Info color setting affects in the following components of the UI:
The My Requests tab.
Primary action buttons and text for notifications.
Default color for the Info option in the Variant setting for Screen controls.
Default hex color: #17A2B8.
Warning: The Warning color setting affects in the following components of the UI:
The All Requests tab.
Default color for the Warning option in the Variant setting for Screen controls.
Default hex color: #FBBE02.
Danger: The Danger color setting affects in the following components of the UI:
The Canceled icon that represents a Request is canceled.
Default color for the Danger option in the Variant setting for Screen controls.
Default hex color: #ED4757.
Dark: The Dark color setting affects the Dark option in the Variant setting for Screen controls. Default hex color: #000000.
Light: The Light color setting affects in the following components of the UI:
Background color of the top menu.
Color of icons in the left sidebar.
Default color for the Light option in the Variant setting for Screen controls.
Default hex color: #FFFFFF.
Default font: Change the default font that displays in your ProcessMaker Platform instance. The following fonts are available in the order they present in the application:
Default Font (the default font)
Mono Type
Arial
Arial Black
Bookman
Comic Sans MS
Courier New
Garamond
Georgia
Helvetica
Impact
Times New Roman
Verdana
Palatino
Trebuchet MS
By default the Login Page Footer setting that displays rich text below the log on settings does not contain a value. Use this setting to display information users must be aware of prior to logging on, such as terms and conditions.
Follow these steps to customize the user interface (UI) in your ProcessMaker Platform instance:
Log on to ProcessMaker Platform.
Click the Admin option from the top menu. The Users page displays.
From the Custom Login Logo setting, click the Browse button, and then locate the image to display in the Login Screen. For best results, use a transparent PNG image at 292 by 52 pixels.
The Custom Logo and Custom Icon settings work together: the logo represents the complete name, tagline and any other trademarked assets for the brand; the icon represents the stand-alone icon for the brand.
Follow these guidelines to change the default logo and icon, if necessary:
From the Custom Logo field, click the Upload File button, and then locate the image to display as the brand's logo. Use a transparent PNG image at 150 by 40 pixels for best results.
From the Custom Icon field, click the Upload File button, and then locate the image to display as the brand's icon. Use a transparent PNG image at 40 by 40 pixels for best results.
From the Custom Favicon setting, click the Browse button, and then locate the favicon image to display in the browser tab. For best results, use a transparent PNG image at 32 by 32 pixels.
In the Alternative Text setting, enter text to display if the image linked to the custom login logo, custom logo or icon is not available.
Follow these guidelines to change any of the colors that comprise a color scheme (as described in the Overview section), if necessary:
Do one of the following:
In the Hex field, enter the hex color value for your selected color, and then press Enter.
Enter the RGBA (red, green, blue and alpha) color values for your selected color.
Click one of the color swatches (or the transparency swatch) to select your color.
Click inside the color palette to select your color.
From the Custom Font drop-down menu, optionally select one of the fonts described in the Overview section to display all text in ProcessMaker Platform.
Follow these guidelines to use the WYSIWYG rich text editor to stylize your text:
Select the required text from the Rich Text control.
In the URL setting, enter the destination URL.
In the Text to display setting, edit or enter the text displayed in the log on page footer text.
In the Title setting, enter the text to display when a user hovers over the displayed text.
From Open link in… drop-down menu, select one of these options:
New window: Select this option to open the destination page in a new browser window.
Current window: Select this option to open the destination page in the current browser window.
Click Save.
Format text: Follow these guidelines to format text:
Headings: From the Formats menu, select Headings and then select a heading size.
Bold: Do one of the following:
From the Formats menu, select Inline and then Bold.
Italics: Do one of the following:
From the Formats menu, select Inline and then Italic.
Select one of the color swatches from the color palette. The selected text changes to that color.
Align text: Follow these guidelines to align text:
Left align: Do one of the following:
From the Formats menu, select Align and then Left.
Center align: Do one of the following:
From the Formats menu, select Align and then Center.
Right align: Do one of the following:
From the Formats menu, select Align and then Right.
Justify: Do one of the following:
From the Formats menu, select Align and then Justify.
Clear the current web browser session (Ctrl+F5 for most web browsers). Your web browser window refreshes to display your changes to the ProcessMaker Platform UI.
Learn how to design Dashboards that display BMI and KPIs for business stakeholders.
A dashboard displays important and relevant business management information (BMI) and key performance indicators (KPIs) to specific business stakeholders when they need it. Consider a well-designed dashboard organizes and visualizes important metrics and information for these stakeholders to quickly analyze and ascertain business performance, then understand how to act upon that business information.
Follow these steps to view all the dashboards in your organization:
Click the Admin option from the top menu. The Users page displays.
Click the Dashboards tab to displays all dashboards.
The Dashboards tab displays the name of each dashboard under the Name column and provides options to view, edit or delete these dashboards.
Click the Customize UI icon. The Customize UI page displays:
Click the hex color value for the color that you want to change. The color picker palette displays.
In the Login Page Footer setting, optionally enter rich text that displays below the log on settings displaying information users must be aware of prior to logging on, such as terms and conditions.
Source Code: Click on the Source Code iconto display the Source Code screen, and then enter HTML syntax that displays the content to display below the log on settings.
Undo changes: Click on theicon to undo the last action.
Redo changes: Click on theicon to redo the last undone action.
Insert/Edit links: Click on theicon to convert the selected text into a hyperlink. Follow these steps to create a hyperlink:
Click on theicon. The Insert/Edit Link screen displays.
From the editor toolbar, select theicon.
From the editor toolbar, select theicon.
Change text color: Use the Text Color drop-down to change text color. Click on theicon. The color palette displays. Do one of the following:
Click theicon to select a custom color from the Color Picker.
Click theicon to reset the text to its default color.
From the editor toolbar, use theicon to left-align text.
From the editor toolbar, use theicon to center-align text.
From the editor toolbar, use theicon to right-align text.
From the editor toolbar, use theicon to justify text.
Insert a bullet list: Use theicon to format text as a bulleted list.
Insert a numbered list: Use theicon to format text as a numbered list.
Indent text: Click on theicon to increase text indenting.
Outdent text: Click on theicon to decrease text indenting.
Click Save. ProcessMaker regenerates the UI.
Clicking the Home iconin the breadcrumbs displays the dashboard for that logged on user.
Designing dashboards comprises of a Display-type . To incorporate relevant BMI and KPIs, create of your data, and then add those Saved Search charts to the Screen using the control in .
See for design ideas.
Ensure that you are to ProcessMaker Platform.
Click the Customize UI iconfrom the left menu. The Customize UI page displays and shows the Site Design tab by default.
Open a dashboard to review how users view that dashboard's content.
Opening a dashboard loads the Display-type Screen that dashboard uses and then displays its content in a new Web browser window. Review the dashboard's content prior to that dashboard's deployment or during its maintenance.
The top menu is not affected when opening a dashboard.
Follow these steps to open a dashboard to review it:
View all dashboards in your organization. The Dashboards tab displays:
Create a dashboard that displays BMI, KPIs, and commonly used information for business stakeholders.
Prior to creating a dashboard, ensure that the following ProcessMaker Platform assets exist for this dashboard:
A Display-type Screen must contain the content for your dashboard. If the specific Screen for this dashboard does not exist, create that Screen.
While a dashboard may contain any content that a Display-type Screen supports, consider any of the following for an effective dashboard:
Design Business management information (BMI) and key performance indicators (KPI) for intended business stakeholders. Create one or more Saved Searches, and then design Saved Search charts from the Saved Search(es) to provide KPIs that your intended business stakeholders would inform them of business information they would value.
Design content in that Screen that this dashboard's intended audience would find valuable, including but not limited to general information, files to download or preview that this audience uses frequently, and images. Integrate information from a Collection record to provide relevant record data.
Design the Screen as intended to display the dashboard's content.
Follow these steps to create a dashboard:
View all dashboards in your organization. The Dashboards tab displays:
In the Name setting, enter a unique name for the dashboard. This is a required setting.
From the Screen setting, select the Display-type Screen designed with content for the dashboard. This is a required setting.
In the Description (optional) setting, enter a description for the dashboard.
Click Save. The following message displays after creating the dashboard: Configuration Dashboard Updated.
Edit a dashboard that displays BMI, KPIs, and commonly used information for business stakeholders.
Follow these steps to edit a dashboard:
View all dashboards in your organization. The Dashboards tab displays:
Edit the following information about the dashboard as necessary:
In the Name setting, edit the unique name of the dashboard. This is a required field.
From the Screen setting, select the Display-type Screen designed with content for the dashboard. This is a required setting.
In the Description (optional) setting, edit a description for the dashboard.
Click Save.
Delete a dashboard that your business stakeholders no longer use.
Follow these steps to delete a dashboard:
View all dashboards in your organization. The Dashboards tab displays:
Click Confirm. The following message displays: The dashboard was deleted.
Customize links in the ProcessMaker Platform top menu.
A custom menu replaces the default top menu that displays in ProcessMaker Platform. Each item in the custom menu is a hyperlink that specific users and/or group members configured to view that menu may select to go to that hyperlink's destination. A well-designed custom menu organizes important, relevant hyperlinks to destinations that user or group members visit frequently, such as the following:
External links your organization visits frequently, such as your organization's portal.
Follow these steps to view all the menus in your organization:
Click the Admin option from the top menu. The Users page displays.
Click the Menus tab to display all menus.
The Menus tab displays the name of each menu under the Name column. and provides options to edit or delete these menus.
Create links for a custom menu that displays at the top of the ProcessMaker Platform user interface.
Create a customized menu that displays commonly used tabs for users.
Follow these steps to create a menu:
Click the +Menu button. The Create Menu screen displays.
In the Name setting, enter a unique name for the menu. This is a required setting.
In the Description (optional) setting, enter a description for the menu.
Click Save.
Click the menu for the dashboard to view.
Click the Open Dashboard icon. The dashboard opens in a new Web browser window.
Click the +Dashboard button. The Create Configuration Dashboard screen displays.
Click the menu for the dashboard to edit.
Click the Edit option. The Update Configuration Dashboard screen displays.
Click the menu for the dashboard to delete.
Click the Delete icon. The Caution screen displays to confirm the deletion of the dashboard.
for users who have access to those Collections can more easily access them after those users log on.
for users who have been shared those Saved Searches can more easily access them.
that users start often.
For example, for your Sales team members that provides links to the in-progress Requests location and their Saved Searches they use to monitor their KPIs, but another menu for all users to access Human Resources information. Different users and different groups may access the same custom menu.
Ensure that you are to ProcessMaker Platform.
Click the Customize UI iconfrom the left menu. The Customize UI page displays and shows the Site Design tab.
. The Menus tab displays:
Locate the URL for ProcessMaker Platform locations so as to link to them from a custom menu or to redirect users to that location when they next log on.
Create a customized hyperlink within a menu to either a ProcessMaker Platform location or an external site.
Consider the following destinations for a hyperlink so that users/group members that have access to the destination may view them without navigating the ProcessMaker Platform user interface:
Link to the URL that starts a specific Request of a Process. See how to locate the URL to start a Request.
Link to Tasks to do. See how to locate the To Do Task list URL.
Link to a Collection. See how to locate a Collection's URL.
Link to a Saved Search. See how to locate a Saved Search's URL.
Link to a dashboard. See how to locate a dashboard's URL.
Generally, ensure that all users/group members have access to the ProcessMaker Platform destination. The following message displays to users that do not have access to a ProcessMaker Platform location or asset: Unauthorized.
A custom menu link can be configured such that when clicked, a Request starts. The URL for a Process's Request is available from its Start button in the New Request screen.
If a user is not configured from a Start Event element in the Process from which to start a Request, the following message displays when that user attempts to start that Request: Unauthorized.
Follow these steps to locate the URL to start a Request:
Click the +Request button from which all Requests start. The New Request screen displays.
Locate the Start button for the Process from which to start a Request, right-click that Start button, and then copy the link address/URL from that button. This is the URL from which to start that Request.
See the following sections regarding how to locate a Task page URL:
The default To Do Task page is located at https://ProcessMaker-Instance-Name/tasks
where ProcessMaker-Instance-Name
is the name of your ProcessMaker Platform instance. This is the URL to enter when configuring the hyperlink for a menu or to redirect to the default Task page.
Follow these guidelines to determine a Saved Search's ID, which is required for the hyperlink to that Saved Search's Task page for a menu's hyperlink or to redirect to its Task page:
Ensure that the Saved Search is shared with you or you are its owner; otherwise you cannot determine the Saved Search ID, which is the numerical representation your ProcessMaker Platform instance uses for that Saved Search. The Saved Search determines which Task-related results it displays, such as whether it displays tasks to be done, that are completed, and/or are self-serviced.
Ensure that all users/group members have been shared the Saved Search. If a user cannot access a Saved Search, the following message displays instead of the Saved Search: Unauthorized error.
View the data details of the Request, Task, or Collection Saved Search to determine its ID.
From the Web browser address bar, note the number that ends the URL. This number is the Saved Search ID. For example, in the Saved Search URL https://ProcessMakerPlatform-Instance-Name/requests/saved-searches/114
, 114
is the Saved Search ID.
The URL for the To Do Task page of that Saved Search is https://ProcessMakerPlatform-Instance-Name/tasks/saved-searches/ID
where ProcessMaker-Instance-Name
is the name of your ProcessMaker instance and ID
is the Saved Search ID.
Ensure that all users/group members that use the menu or redirect to a Collection have the following:
Collection permissions, as configured from a user's account or a group
Access to at least view the records in that Collection, either as individual users or as group members
If a user cannot access a Collection, the following message displays instead of the Collection: Unauthorized.
Follow these steps to locate a Collection's URL:
View your Collections. The Collections page displays.
View the records for the Collection from which to get its URL. The list of records displays for the selected Collection.
Copy the URL from the Web browser address bar. This is the Collection's URL.
Ensure that all users/group members that use the menu or redirect to a Saved Search have been shared the Saved Search.
Ensure that the Saved Search in which to get its URL has been shared with you or you are its owner; otherwise, you will not be able to access the Saved Search to locate its URL.
If a user cannot access a Saved Search, the following message displays instead of the Saved Search: Unauthorized.
Follow these steps to locate a Saved Search's URL:
View the data details of the Request, Task, or Collection Saved Search to locate its URL.
Copy the URL from the Web browser address bar. This is the Saved Search's URL.
Follow these steps to locate a dashboard's URL:
View your dashboards. The Dashboards tab displays the Dashboards page.
Copy the URL from the Web browser address bar. This is the dashboard's URL.
Create a hyperlink for a custom menu that displays at the top of the ProcessMaker Platform user interface.
Follow these steps to create a menu:
View all menus in your organization. The Menus tab displays:
In the Link Text setting, enter a unique name for the link. This is a required setting if an icon is not selected from the Icon setting.
From the Icon setting, select an icon to display to the left of the link text. This is a required setting if the Link Text setting does not contain a value.
From the Color Variant setting, select a color to display for the link. Both the link text and the icon display in the selected color. Select from one of the following options:
black: Black-colored. This is the default option.
danger: Red-colored
info: Teal-colored
primary: Blue-colored
secondary: Gray-colored
success: Green-colored
warning: Yellow-colored
white: White-colored
In the URL setting, enter the URL that links to the location. See the following regarding how to locate the URL for these ProcessMaker locations:
Select the Open in a new window checkbox to open the link in a new browser window.
Click Save. The link displays in the Link tab.
Delete a hyperlink from a custom menu that displays at the top of the ProcessMaker Platform user interface.
Delete a previously customized link that displays commonly used tabs for users.
Follow these steps to delete a link for the menu:
Click Confirm.
Edit a hyperlink for a custom menu that displays at the top of the ProcessMaker Platform user interface.
Follow these steps to edit a menu:
Edit the following settings as necessary:
In the Link Text setting, edit a unique name for the link. This is a required setting if an icon is not selected from the Icon setting.
From the Icon setting, select an icon to display to the left of the link text. This is a required setting if the Link Text setting does not contain a value.
From the Color Variant setting, select a color to display for the link. Both the link text and the icon display in the selected color. Select from one of the following options:
black: Black-colored. This is the default option.
danger: Red-colored
info: Teal-colored
primary: Blue-colored
secondary: Gray-colored
success: Green-colored
warning: Yellow-colored
white: White-colored
In the URL setting, edit the URL that links to the location. See the following regarding how to locate the URL for these ProcessMaker locations:
Select the Open in a new window checkbox to open the link in a new browser window.
Click Save.
Click the menu for the menu in which to create a link.
Click the Edit Menu option. The Links tab displays links for the selected menu. Links display from top to bottom in the Links tab as they display in the menu, left to right.
Click the +Link button. The Create Link screen displays.
. The Menus tab displays:
Click themenu for the menu in which to delete a link.
Click the Edit Menu option. The Links tab displays links for the selected menu. Links display from top to bottom in the Links tab as they display in the menu, left to right.
Click the Delete iconfor the link to delete. The Caution screen displays to confirm the deletion of the link.
. The Menus tab displays:
Click the menu for the menu in which to edit a link.
Click the Edit Menu option. The Links tab displays links for the selected menu. Links display from top to bottom in the Links tab as they display in the menu, left to right.
Click the Edit Link iconfor the link to edit. The Create Link screen displays with the setting values of the link.
Design Home Screens that display for Request participants when they log on to ProcessMaker Platform to show relevant business information.
Home Screens organize daily work for Request participants. They are the "home locations" for each of these business stakeholders. These Screens provide quick access to assigned Tasks, Requests, and Process Analytics reports. See What is a Request Participant Home Screen?.
Custom Home Screens can be designed to replace the default Home Screen. For example, design a Home Screen for different teams within your organization based on functional roles or Projects.
A Home Screen is composed of the following:
A Display-type Screen with controls to display the business data or Key Performance Indicators (KPIs) for its audience. This may include Saved Search charts, rich text, or any other information relevant to that audience.
A dashboard that references the Screen.
Assigning the dashboard to specific users and/or groups. When that user or group member visits that page for the first time during that log on session, the Home Screen displays.
Follow these guidelines to design a custom Home Screen to replace the default Home Screen:
Do one of the following:
Use the default Home Screen template from which to design the new Home Screen:
Search for the DEFAULT_WELCOME_SCREEN_TEMPLATE
Screen.
Copy the DEFAULT_WELCOME_SCREEN_TEMPLATE
Screen.
Edit the copied Screen. This Screen contains the controls configured for the default Request participant Home Screen.
Optionally, use List Table controls to display the following:
Display all Tasks for the logged on user. The assigned Tasks display by default.
Display all Requests that the logged on user either started or is a participant. In-progress Requests display by default.
Display all the Requests that the logged on user may start.
Add and configure the controls for the business data or KPIs to display to in the Home Screen.
Create a dashboard that references the Screen designed for the Home Screen.
Do any of the following to reference the dashboard for those who are to experience your Home Screen when they visit that page the first time during their log on session:
Sort the order of links that display in a custom menu.
Follow these steps to sort the order of links in a menu:
View all menus in your organization. The Menus tab displays:
Delete a custom menu that your business stakeholders no longer use.
Follow these steps to delete a menu:
View all menus in your organization. The Menus tab displays:
Click Confirm.
Configure which users and/or groups view a custom home page and/or menu when logging on to ProcessMaker Platform.
Optionally, configure a custom home page, and/or a menu, for a user or members of a group when that user or group member logs on to ProcessMaker Platform. A custom home page may be one of the following:
The custom home page and menu are configured separately.
The user or group member does not experience the custom home page and/or menu change until the next time that user logs on.
When a user is a member of a group and the group's custom home page and/or menu setting is different than that of that user's account, the user account configuration(s) supersedes that of the group's.
Below is an example of a custom home page that contains a dashboard and custom menu.
A user can be configured with multiple custom home pages and/or menus. That user may have a different custom home page and/or menu than that configured for each group that user is a member:
Each custom home page/dashboard a user is configured from the user account or group(s) that user is a member displays in a separate tab.
Each menu a user is configured from the user account or group(s) that user is a member of may be selected from a drop-down menu at the top of the application.
A group member can be configured with multiple custom home pages and/or menus. That user may have a different custom home page and/or menu than that configured for each group that user is a member:
Each custom home page/dashboard a user is configured from the user account or group(s) that user is a member displays in a separate tab.
Each menu a user is configured from the user account or group(s) that user is a member of may be selected from a drop-down menu at the top of the application.
Click the menu for the menu to sort its links.
Click the Edit Menu option. The Links tab displays links for the selected menu. Links display from top to bottom in the Links tab as they display in the menu, left to right.
Select, and then drag, a sort iconcorresponding with a link to place it in a different order in the menu.
Click the menu for the menu to delete.
Click the Delete icon. The Caution screen displays to confirm the deletion of the menu.
Dashboard: The page may be a curated with relevant information.
Redirect URL: The URL may be to an external site, such as to an organization's portal, or to a ProcessMaker Platform location such as a specified or to which that user has access.
Users or group members configured with a custom home page can view that home page by clicking the Home iconfrom the breadcrumbs.
See the following sections in the topic:
‌See the following sections in the topic: