Question

Action history formatting CSS / Stylesheet

Forms Laserfiche

Updated August 24, 2017

asked on May 19, 2017

While using Laserfiche Forms "Save to repository" task, I've been using the option to "Include action history". This is critical to our Human Resource department as a record of approvals. Recently I've been asked to help make the information a little less cluttered, and a bit easier to read at a glance. For example, with distinctive colors for Approvals vs Rejections and to allow comments to stand out a bit more too.

Is there a way to alter the look / style of the Action History Form when saved to the repository?

Ideally it'd be nice to have some CSS classes that we can include in the Forms custom CSS section. However, we're willing to modify and manage a CSS file that may be located elsewhere on the system too, assuming that there isn't a user facing way to alter it otherwise.

Thanks in advance for any tips / suggestions that you can provide!

0 0

Answer

SELECTED ANSWER

replied on May 24, 2017

To make the button style different based on text inside, you can change the

<span class="action-label" ng-if="item.submission.action != '__WorkflowAction'">{{item.submission.action}}</span>

<span class="action-label" ng-if="item.submission.action != '__WorkflowAction'" ng-style="item.submission.action === 'Submit' && {'background-color': 'green'} || item.submission.action === 'Reject' && {'background-color': 'red'} || item.submission.action === 'Approve' && {'background-color': 'blue'}">{{item.submission.action}}</span>

As for the inbox action history, open file C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js\templates\partial.template.js, search for

<div class="timeline-action-label" style="max-width:100%" ng-if="item.submission.action">

and change it to

<div class="timeline-action-label" style="max-width:100%" ng-if="item.submission.action" ng-style="item.submission.action === \'Submit\' && {\'background-color\': \'green\'} || item.submission.action === \'Reject\' && {\'background-color\': \'red\'} || item.submission.action === \'Approve\' && {\'background-color\': \'blue\'}">

I have filed a feature request for native support of customizing action history button color but it may not be ready in next release.

3 0

Replies

replied on May 21, 2017

You can check the file C:\Program Files\Laserfiche\Laserfiche Forms\Forms\Partials\_ActionHistoryPrint.html and update its style, but the style could not be controlled in custom CSS of a form.

1 0

replied on May 24, 2017 • Show version history

Thank you very much Rui,

After close examination and research I've been able to make some minor alterations / improvements to the associated html & css files that better suite our needs. This work will be ongoing, and I really don't look forward to managing these changes between releases.

I would like to see more end user facing abilities to style and / or theme the Action History as we do the Forms themselves. The HTML / CSS involved is a bit messy at the moment and it would be nice in the future to have better documentation and cleaner CSS classes / IDs on the elements. There is currently quite a bit of excessive CSS and inline styles that probably shouldn't be there.

One follow up question:

Is there any way (using angular JS or otherwise) to distinguish between the actions in order to style (color) them uniquely?

(for example: 1st action (submit) would always be green, and any approval would be blue, while any rejection would show as red, or a task reassignment would be yellow etc.)

First and foremost, this coloring would be great to see within the Forms Action History section which looks oddly non-distinctive when viewing actions at a glance.

See below (details in RED):

Thanks again for your help and please let me know if these suggestions should be considered enhancement requests and would be better posted elsewhere.

Have a great day!

2 0

SELECTED ANSWER

replied on May 24, 2017

To make the button style different based on text inside, you can change the

<span class="action-label" ng-if="item.submission.action != '__WorkflowAction'">{{item.submission.action}}</span>

<span class="action-label" ng-if="item.submission.action != '__WorkflowAction'" ng-style="item.submission.action === 'Submit' && {'background-color': 'green'} || item.submission.action === 'Reject' && {'background-color': 'red'} || item.submission.action === 'Approve' && {'background-color': 'blue'}">{{item.submission.action}}</span>

As for the inbox action history, open file C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js\templates\partial.template.js, search for

<div class="timeline-action-label" style="max-width:100%" ng-if="item.submission.action">

and change it to

<div class="timeline-action-label" style="max-width:100%" ng-if="item.submission.action" ng-style="item.submission.action === \'Submit\' && {\'background-color\': \'green\'} || item.submission.action === \'Reject\' && {\'background-color\': \'red\'} || item.submission.action === \'Approve\' && {\'background-color\': \'blue\'}">

I have filed a feature request for native support of customizing action history button color but it may not be ready in next release.

3 0

replied on May 25, 2017

Thank you Rui, this information is very much appreciated!

0 0

replied on August 24, 2017

We modified the partial.template file and that worked well, thank you. We did note that after upgrading Forms, our Action History failed to load. We had to replace the partial.template file with a non-customized matching version file, then reapply the customization in the partial.template file again. So in future, prior to upgrade/update to Forms, we will replace the customized file with the original, do the upgrade/update, then apply the customization again.

0 0

You are not allowed to follow up in this post.

Question

Question

Action history formatting CSS / Stylesheet

Answer

Replies

Sign in to reply to this post.