Processmaker Skins
- Skins provide the visual appearance to the ProcessMaker interface. By default, ProcessMaker 3.0 provides the neoclassic and classic skin for a standard blue. On March 27th, Colosa launched the much anticipated release candidate for its Version 2.5 ProcessMaker Open Source BPM & Workflow suite.
- ProcessMaker is commercial open source workflow and business process management software.
Multitenancy Management Plug- in. Colosa / processmaker. ProcessMaker is commercial open source workflow and business process management software.
Live Question & Answer Session This 10 hour course includes 9 hours of training videos, followed by a 1 hour Question & Answer session to clarify any material covered in the videos and ask about any other topics regarding ProcessMaker. Course Fee: $ 995.00 For more information Video 1. Process Mapping and User/Role Management, 3 hours The first video covers the fundamentals including BPM Basics, Process Design, Routing Rules, Tasks, Calendars, Users, Groups, Departments, External Authentication of Users, Roles with Permissions, Process Permissions, Process Supervisors, Running Cases and Case Management. DynaForms, Database Connections & Documents, 3 hours The second video delves into ProcessMaker Architecture, custom DynaForms (Field Properties, XML, HTML), Grids, PM Tables, Database Connections, Dependent Fields, Steps, Input & Output Documents, and JavaScript.
Advanced Features and Customization, 3 hours The last video explores advanced features and the customization of processes including Triggers, Email with Conditional Notifications, Events, Subprocesses, Web Entry, Case Tracker, Web Services, and the administration of Plugins, Skins and Languages. The training videos can be viewed online at the ProcessMaker website for a period of one week. Live Question & Answer Session, 1 hour At the end of the one week period, a Live Question & Answer Session will be scheduled to discuss any topics which need further clarification or more in-depth explanation.
All questions regarding ProcessMaker are welcome, but please note that some questions may require the purchase of additional support or consulting hours to fully resolve. The training videos may NOTbe redistributed and may only be viewed by the individual or members of the organization which purchased the ProcessMaker Boot Camp Training Course.
. Overview Skins provide the visual appearance to the ProcessMaker interface.
Cut become the centerpiece of the story when the un-cut version is seen. Luc besson. Their relationship unfolds against a backdrop of murder and revenge as director Luc Besson explores issues of age and maturity, good and evil, and the interplay of life, death and love. Elements of the story which are only hinted at in the U.S. The two main characters are a recently-orphaned girl who is wise beyond her years and a hitman who is still an innocent. Version is still a great movie, but it cuts out 24 minutes which contain much of the heart of the movie and most of what makes the film a work of art instead of the usual action fodder.
By default, ProcessMaker 2.5.x provides the 'neoclassic' skin for a standard blue/grey interface. In addition, new skins can be manually created to customize the appearance of ProcessMaker. Applying a Skin By default, the 'neoclassic' skin is applied when ProcessMaker is installed. To change this skin go to ADMIN Settings Skins and all available skins will be listed, double click on the skin to apply it, this functionality is available from version 2.0.45. Note: When a skin is changed it will be visible ONLY for the current browser and workspace where user applied it. Available Skins To see a list of available skins installed in ProcessMaker, go to ADMIN Settings Skins.
Processmaker Skins
All available skins created for the current ProcessMaker Installation will be listed. From version 2.0 Green and Orange skins were removed form the list of available skins. Skin menu on versions 2.0.45 and previous doesn't show which skin the workspace was using. However, from version 2.5 the skin used is displaying with an italic bold text and set a checked image in the current skin row. Available skins used in version 2.5.x:. Classic Skin This skin returns the appearance of ProcessMaker to the classic blue and gray interface. To view this skin simply change the URL direction to.
Workflow engine skinEngine base Neoclassic Skin Available Version: From 2.5.1 on. A new installation uses the default 'neoclassic' skin. In addition, the 'blank' skin can be used to eliminate the top frame containing the logo and the top-level menu. This skin is designed for production users who only need access to the HOME menu and will be running ProcessMaker on devices with limited screen resolution, such as tablets, netbooks, and some types of smartphones.
The 'raw' skin can be used for debugging and devices with limited processing power. It doesn't load all the JavaScript libraries, so not all functionality will work correctly with the 'raw' skin. For example, for the ADMIN tab of ProcessMaker, the appearance will be like the following: The files defining ProcessMaker's default 'neoclassic' skin are located in the directory. Workflow engine skinEngine neoclassic Other Skins UxModern Note: This skin was removed from version 2.5.0 because of performance issues. The elegant “UxModern” skin was presented in version 2.0.40 of ProcessMaker.
The soft shades of its blue colors and its delicate shape, made this skin more attractive than the others, and offered users a much more friendly interface, with noticeable menu icons and other tools which brought a sense of light working. Recommendation: This interface was developed in ExtJs language so we strongly recommend to clear cache every time the user would like to make modifications in the Admin menu or when a process is designed. New Applications Once the user has logged in, this interface presents the same applications and menus for the user but with new icons: On the upper side of the screen, in the administrator link, there are three new tabs added for the user with the PROCESSMAKERADMIN role: On the contrary for users with PROCESSMAKEROPERATOR and PROCESSMAKERMANAGER role, it will display only two options as the show below: This three tabs as shown. Below has the following properties: Viewing/Editing the profile: Allows view and edit the profile of the user: A tab named Profile next to the others tabs will appear with the information of the user running the tool In the bottom of the edit box, will appear the edit button, right click on it and edit the information you need. After editing the information and in this case, download a picture of the user, a box with all the new information will appear.
System Information: Shows the system information as it follows: Shows the system information as it follows Logout: This last option gives the user the log-out to Processmaker. Switching tabs One of the advantages of this new skin is that it preserves the last action made on a tab. For example, if the user was editing a process on the process map and suddenly wants to go back to the Admin tab to modify the information of a user, the Process map tab will keep the data of the changes the user was making at the moment of switching tabs. Another option is the possibility to close a tab, for example if you open an extra tab like Profile, it will be open as follows: It will be closed by clicking on the X option on the upper side of the tab. User Experience Skin The Simplified User Inbox available from version 2.0.37, as the name suggests, users now have a simplified inbox where they can customize the ProcessMaker interface by changing the interface on the inboxes where appropriate. The characteristics of this new interface will not stay here, now this application works also on iPhone, Ipad, and Andorid, allowing users to navigate into ProcessMaker from mobile phones, accessing the interface from wherever they are located. Also, users can use this new interface as if they were working from a computer.
There are three types of User experience: Normal, Simplified and Switchable:. Normal: users can have the normal view of ProcessMaker. Simplified: Users can have a simplified view of the ProcessMaker interface, viewing only the inbox where their incoming cases are listed with an overview of the information surrounding the case such as; name and number of the case, person in charge, date of the case, name of the form and the process it belongs to. This is very useful because users can only see cases which require further action. By clicking on the name of the Dynaform, it will display the next step allowing users to continue the case: For more information about the use of this skin check RTL Skin Available Version: From 2.0.44 - 2.0.45 on. Although a RTL language was included on version 2.0.44, on version 2.0.45 ProcessMaker has integrated a skin to have more possibilities to expand the use of RTL Languages inside ProcessMaker. RTL language will be writing from the right of the page and continues to the left.
RTL works with Arabic, Hebrew and Farsi. On the image below, an example of how ProcessMaker looks with the Arabic language: Login Page: ProcessMaker Interface: As it was mentioned before, from version 2.0.45, RTL skin was included as a part of the available skins on ProcessMaker, it means that for every style sheet that defines LTR styles (classic, uxmodern, simplified, etc, there should be a corresponding RTL stylesheet (rtl.css).
For example, using the classic skin, its corresponding rtl file will be located. /workflow/engine/skinEngine/base/css Note: It's strongly recommended to when using RTL Languages to have the skin applied correctly. Error Skins Available Version: From 2.5 on. Sometimes when some URL was not entering correctly an error page was displayed, but message was not too clear to fix the problem. From this version 3 new pages will come up, specifying the error and some possible reasons of the error and some resources which will help users to identify it.
Skin: 404 Not Found When an URL is not entered correctly, the following skin will display: Skin: 403 Forbidden Error If user types an incorrect URL or if the page is prohibited, he will be redirected automatically to the following page: Skin: Websites Under Construction If for some reasons ProcessMaker is unavailable (Upgrade, server down, etc.) users will be redirected to the following page: Changing Skins Layout Available Version: From 2.5.2 on. The and skins can be changed thanks to the addition of the error404.php and updating.php files inside the skin folder. Those files make both skins customized according to the user requirements. Although both files have a php extension, the most part of the content is HTML code, so following the steps below the procedure to customize them shouldn't be difficult: 1. Go to the path where the skins are located. The URL link may be incorrect.
Once you changed the line, test it by modifying your ProcessMaker URL, note that you don't need to restart your server to apply changes, so you will see the modification as follows: Repeat the same procedure on the same procedure must follow if you want to modify the updating.php file Note: If you want to make modifications in those skins on previous versions of ProcessMaker (Remember that those skins are available from version 2.5.0) you just have to copy error404.php and updating.php files inside the corresponding paths where the skins are located. Changing the skin Users who would like to change back the classic skin, we recommend to go to and follow this steps: Go to ADMIN Settings System Preferences and click on the down arrow to view the available skin options. After selecting the skin, save the settings clicking on the Save settings button at the bottom of the page. A dialog box will appear as below: And on the left side of the corner on the screen another box will appear informing you that the changes have been saved: Click on “Yes” and login again to refresh the skin.
Creating Skins New Skins can be added using either the ProcessMaker Interface or manually creating them inside the file system: Creating Skins using ProcessMaker interface Go to ADMIN Settings Skins and click on the 'New' button: Note: Each fields indicates if it is a required field with a hint text on them a red underlined. Where:. Name: Name of the new skin.
Folder Name: Folder of the name where all skins files will be located. This field is added automatically with the same name of the skin created, but it is possible to change it; however, if this skin will have further editions, it is recommended to keep both of them with the same name.
Description: a brief description of the skin. Author: name of the person who will create the skin. Base Skin: list of all available skins. One of them must be chosen as a base for the creation of the new skin.
Once the information is completed, click on Save button to have the new skin created. The skin will be created inside the following location. /shared/skins Then you need to edit the style.css file, to customize DynaForms, texts, etc. Creating Skins by Workspace Available Version: From 2.5 When a new skin is created, it has the possibility to be used either by the current workspaces on which is created or by all workspaces created on the server where ProcessMaker has been installed. If users want to configure more than one skin by workspace, they have to modify the config.xml manually, please refer to to have a more detailed explanation about it. At the bottom side of the window, where the skins is being creating, two new options were added to choose whether the skin will be available:.
All Workspaces: Skin will be available for all workspaces created on the current server where ProcessMaker has been installed. Current Workspace: Skin will be available ONLY for the current workspace on use. Creating Skins Manually New skins can be added to ProcessMaker version 2.0 by manually creating them inside the file system. The files defining ProcessMaker's default 'classic' skin are located in the directory: /workflow/engine/skinEngine/base To create a new skin, first create a new directory named skins inside the shared directory.
Linux/UNIX: Create the skins directory and then set it to use 770 permissions and change its owner and group to the apache user (which is apache:apache in Red Hat/CentOS/Fedora, www-data:www-data in Debian/Ubuntu, and www-run:www in SUSE/OpenSUSE). Mkdir /opt/processmaker/shared/skins chmod 770 /opt/processmaker/shared/skins chown apache-user: apache-group /opt/processmaker/shared/skins Windows: Open the Windows Files Manager, and navigate to the /processmaker/shared directory. Right click in the directory and select New Folder from the dropdown menu, and then name it 'skins'. After creating the skins directory, copy the default skin's base directory to it and rename it with the name of the new skin. For example, to create a skin named 'green'. Cp -r /opt/processmaker/workflow/engine/skinEngine/base /opt/processmaker/shared/skins/green Windows: In the Windows Files Manager, copy the processmaker workflow engine skinEngine base directory and paste it inside the processmaker shared directory.
Then, press F2 to rename the base directory as green. Remember that skin names are case sensitive, so a skin directory named 'GreeN' is different from 'green'. Skins have a file structure like: shared/ skins/ skin-name/ baseCss/ ext-all.css ext-all-notheme.css css/ jscolors.css pmos-xtheme-grey.css printstyle.css sprite.css spriteie.css style.css xmlcolor.css xtheme-grey.css images/ (empty) config.xml extJsInitLoad.html layout.html layout-blank.html layout-extjs.html layout-raw.html layout-submenu.html layout-tracker.html ProcessMaker can now use the new skin files, but it a good idea to edit the information displayed about the skin in the skin list. Open the shared/skins/ skin-name /config.xml file with a plain text editor and edit the values for the, and in the section. 02 Green Custom Green skin Amos Batto 1.0 2011-04-26 2011-04-26 The can be any numeric value which is different from 01, which is used by the 'classic' skin.
The config.xml file can also be edited to use different Cascading Style Sheets (CSS) files in the skin. Importing and Exporting Skins The Import and Export buttons above the skins list are currently disabled in ProcessMaker until version 2.0.30. If a skin needs to be imported and exported on versions before 2.0.31, simply copy the skin directory and its contents from one installation of ProcessMaker to another. For example, to use to copy the 'green' skin from the local ProcessMaker installation to another machine running ProcessMaker at the IP address 192.168.1.100.
Scp -r /opt/processmaker/shared/skins/green root@192.168.1.100:/opt/processmaker/shared/skins From version 2.0.31 on it is possible to use Import and Export buttons above the skins list. By clicking on the 'Import' option, a skin created on a different installation or ProcessMaker server could be imported. It has a.tar extension. By choosing a skin from the list and clicking on the 'Export' option, it will be exported on a.tar extension.
Removing Skins To remove a skin, simply delete the skin's directory. For example, to remove the 'green' skin in Linux/UNIX. Rm -rf /opt/processmaker/shared/skins/green From version 2.0.31 it can be removed by ProcessMaker interface, by clicking on the 'Delete' option. Note: Classic skin can't be deleted from the list of available skins, since it is the skin by default on ProcessMaker. Configuring Skins by Workspace Available Version: From 2.5 on. Usually, when different projects are handled on the same server, they are forced to see the list of all available skins used for all workspaces created on that server, even if they use different skins, not giving the possibility to personalize each workspace according to the skins configured to use on each one.
This happens on versions prior to 2.0.45. From version 2.5 it is possible to configure and discriminate skin according to the workspace used. To configure a skin to be used on a specific workspace, open config.xml file located at: To use Classic skin: /workflow/engine/skinEngine/config.xml To use Uxmodern /workflow/engine/skinEngine/uxmodern/config.xml To use Simplified /workflow/engine/skinEngine/simplified/config.xml To use Single Application: /workflow/engine/skinEngine/uxs/config.xml Find the following code. Linux/UNIX: Create the images directory and then set it to use 770 permissions and change its owner and group to the apache user (which is apache:apache in Red Hat/CentOS/Fedora, www-data:www-data in Debian/Ubuntu, and www-run:www in SUSE/OpenSUSE): mkdir /opt/processmaker/shared/skins/skin-name/images chmod 770 /opt/processmaker/shared/skins/skin-name/images chown apache-user: apache-group /opt/processmaker/shared/skins/skin-name/images Windows: Open the Windows Files Manager, and navigate to the /processmaker/shared/skins/ skin-name directory. Right click in the directory and select New Folderfrom the dropdown menu, and then name it 'images'. After creating the images directory, then copy image files to the directory.
Referencing Skin Images To use custom images in a skin, the html files for the skin will have to be edited to add references to the images. Skin images are accessible with the path '/skin/ skin-name/images/ image-filename'. For example, the default ProcessMaker favicon is replaced with a custom favicon named 'mycompany.ico' in the 'green' skin. Copy the mycompany.ico file to the /shared/skins/green/images directory. Then, edit the& /shared/skins/green/layout.html file and change line 5 from.
However, make sure that the logo image file is no more than 50 pixels high, otherwise, it will shove down the interface, so the bottom of the ProcessMaker interface is no longer viewable in the web browser. Changing the Logo according to the Department Code can be added to the layout.html file to lookup the department of the logged in user and change the logo based upon the department. Replace line 15 from layout.html file. GetElementById ( 'loading-msg' ). InnerHTML = 'Loading Core API.' GetElementById ( 'loading-msg' ). InnerHTML = 'Loading UI Components.'
GetElementById ( 'loading-msg' ). InnerHTML = 'Loading UI Extensions'. GetElementById ( 'loading-msg' ). InnerHTML = 'Initializing.' ; For instance, replacing Initializing text to Initializing ProcessMaker, loading page will be: Switching to a Different Skin The default skin used by ProcessMaker can be set in the interface or by editing the. This setting will set the skin at the login screen, however, the user is free to edit the URL in the web browser to change the skin.
The skin to be used by ProcessMaker is specified in the URL when accessing ProcessMaker through the web browser. The template for ProcessMaker URLs is: /. To switch to a different skin, simply change the URL in the web browser.
The skin can be changed at any time when using ProcessMaker by editing the URL then pressing ENTER to refresh. For example, while looking at the cases list, the default 'classic' skin can be change to the custom 'green' skin by changing the URL from: ip-address/sysworkflow/en/ classic/cases/main To: ip-address/sysworkflow/en/ green/cases/main If just the domain name or IP address is specified in the URL, then the web browser will be redirected to use the 'classic' skin for the login screen. For example, the address is redirected to To make ProcessMaker redirect automatically to another skin other than 'classic', edit the file workflow/publichtml/index.html to specify another skin.
It can generally be found at: Linux/UNIX: /opt/processmaker/workflow/publichtml/index.html Windows: processmaker workflow publichtml index.html Change the skin in the line: Note: These changes to the source code will be overwritten each time ProcessMaker is, so they will have to be reapplied after each upgrade. Forcing ProcessMaker to use a Skin If needing to prevent users from changing the skin by editing the URL in the web browser, add the JavaScript code listed below to force users to always use a certain skin. Changing the skin in the login redirector will only work if the user enters just the domain name or IP address. To force ProcessMaker to always use a skin at the login screen, edit the JavaScript code in the workflow/engine/xmlform/login/login.xml file.
Processmaker Skins
Add code to redirect the login screen to a different skin when the page loads. Change the lines from.