[#46021] - [6.1] Implementation of graphical workflow editor feature
- Pending
- Medium
- Build: 6.1-dev
- # 46021
- Diff
- Dileepadari:6.1-dev
User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Summary of Changes
-
Added a Vue.js based Workflow Graph:
- Displays an overview of the entire workflow with all stages and transitions the user has permission for.
- Allows users with permissions to create, edit, or delete stages and transitions directly from the same page.
-
View only Graph:
- Implemented a button in the article edit page (frontend) which opens a view-only workflow graph.
- This view-only graph enables non-admin users to see the available workflow options without edit option.
Testing Instructions
1. Workflow Graph Editor (Backend)
-
Login as Administrator.
-
Enable Workflows in Article Integration and navigate to the Workflows page.
-
You should see a Graph button - click it.
-
A Workflow Graph page should open showing all workflow details including stages and transitions.
-
Verify the following:
-
Editing: If you have permissions, edit options should appear in the menu of each stage/transition.
-
Keyboard Shortcuts: Check navigation and available shortcuts (reference button at the top-right).
-
Adding Items:
- Add a new stage/transition.
- Add a transition by hovering over a stage -> drag from the dots to another stage.
-
Layout Changes: Drag stages to rearrange them - the layout should auto-save.
-
Zoom Controls: Test zoom in, zoom out, and fit-to-view using buttons at the bottom-right.
-
2. View-Only Graph (Frontend)
- Login to the frontend as a user with workflow access.
- Open the Edit Article page.
- In the Publishing tab, next to the Run Transition option, there should be a Graph button.
- Click the button - a view-only workflow graph should appear, showing all stages and transitions available to that user.
Actual result BEFORE applying this Pull Request
- No graphical representation of workflows.
- Stages and transitions must be managed individually via list views.
- No quick overview of workflow options for non-admin users in the frontend.
Expected result AFTER applying this Pull Request
- A Vue.js based workflow graph is available in the workflows with full management capabilities (depending on permissions).
- Non-admin users in the frontend can access a view-only workflow graph from the article page.
Link to documentations
Please select:
-
Documentation link for docs.joomla.org: Link
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | SQL Administration com_admin Postgresql com_content com_workflow JavaScript |
| Title |
|
||||||
Please check the css you are adding. Some of it seems to be duplicating css already present in the admin template
Thanks a lot for all the feedback, I'm adding the language strings now and also will review the whole code once to remove redundancy. Thanks for the early feedback.
Thank you @Dileepadari for your contribution, that's a really nice feature!
@Dileepadari Not sure if it is a good idea to mark my change suggestions for the update SQL scripts as resolved without having implemented them.
Oh sorry, I am making changes in my local repo and marking as resolved whatever I have updated. So that I can get track of what else changes I need to do. Any other suggestions for that?
Oh sorry, I am making changes in my local repo and marking as resolved whatever I have updated. So that I can get track of what else changes I need to do. Any other suggestions for that?
@Dileepadari Whatever works best for you. But for readers it could be misleading if things are marked as resolved before the solution is visible here. 2 possible ways out: 1. You always push changes when done, and then mark as resolved here, or 2. keep a local list where you can mark what you have done locally.
ok @richard67, Thanks for the suggestion. second option looks good, ill make a list.
| Labels |
Added:
Feature
PR-6.1-dev
|
||
What are these supposed to do? I was never able to focus on them and if I unhide them the links all load the same page
Something weird going on when you try to open an action button with a click. It appears to work ok if the stage is not already active. But when it is active then the button does nothing
chrome_s6qYY56Wla.mp4
I can see that you have tried to make this accessible and supporting screen readers and I applaud you for trying. But have you actually tested it with a screen reader as I don't think it's working as you expect. I'm not even sure if it is even realistically achievable to support screen readers in this visual presentation
In the front end view some of the keyboard shortcuts still work but they are not documented. Also you dont get the mini map at the bottom left that you do in the admin
I think there is a z-index issue on the front end as some of the lines are on top of the boxes
Admin
Site
What are these supposed to do? I was never able to focus on them and if I unhide them the links all load the same page
Yeah I realized as it is single page, they are not necessary, removed them.
Something weird going on when you try to open an action button with a click. It appears to work ok if the stage is not already active. But when it is active then the button does nothing
chrome_s6qYY56Wla.mp4
Thanks for pointing out, I found a small bug, will fix it soon.
get the
We thought that the view only panel should be as minimal as possible as it has no other use case other than just viewing the connections and the flow, so we felt the mini-map is redundant, do we really need it?
get the
We thought that the view only panel should be as minimal as possible as it has no other use case other than just viewing the connections and the flow, so we felt the mini-map is redundant, do we really need it?
whatever the justification is for having it in the main admin view has not changed in the site view or article view.
Sorry I am going to back out of any further tests for this.
When I look at the Basic Workflow I dont see anything useful. For example it says there are 7 transitions but not what they are.
are they all on top of each other?
update to the last comment. Yes all the transitions are absolutely positioned in the same place. I was expecting something like this (with the correct lines as well)
Please revert the last commit updating tinymce
Thanks for fixing the transitions all being placed on top of each other
The hidden screenreader text uses "published/unpublished" but the visible text uses "enabled/disabled"
Update
Updated an existing test site (maybe unrelated issues so maybe someone else should test updating too):
activated workflows in com_content and clicked on the default workflow on graph:
clicked on stages:
Fresh install
Click on graph with the default com_content workflow:
- initial position is not optimal, maybe centered would be good if possible?
- Also irritating for me is that it goes from right to left per default
- wording of back is a bit irritating, should be close?
(sadly) Shortcuts work differently in joomla, with the j-prefix
I tested the following
- Create Stage
- Create transition
- Delete transition
- Change transition to new Stage
- Moved things around
I expect it's not planned to save the layout I rearranged? Or at least the screen position.
The points on the Stages are a bit strange. at least the color "white" seems not the best choice for the connection line on drag and drop.
I'm not sure what "Undo" and "Redo" does, it seems it's only for layout positions and only one step?
I would expect it could also change transitions and stage changes. It this is not the case I would remove the buttons.
I didn't looked at the code yet, but for this someone with more javascript knowledge should have a look maybe @laoneo ?
| Labels |
Added:
PBF
|
||
I expected the colour in the mini-map to match the colour in the full view
What does Change Focus Type mean
When navigating with a mouse and selecting a stage then both options are unselected
When navigating with a keyboard then the first item has focus (not a problem per se) but this means that the colour is in the focus style and three times I assumed that meant it was disabled
When navigating with the keyboard it is impossible to navigate to a stage you can only navigate to a transition and move between transitions
When using a screen reader (windows narrator) and navigating with the keyboard then the transition menu (shown in the image) does not appear when a transition is selected
Invalid aria/html
transitions/stages have an element aria-described-by but the referenced id does not exist
I realise that this PR has been around for a while now but the copyright should be set to 2026 now
@copyright (C) 2026 Open Source Matters, Inc. <https://www.joomla.org>
Despite these observations it appears to work well and does what it is supposed to do.
Element <div> with "img" role has no accessible name
This is for the mini-map. There is a title inside the svg that could be used
BUT there is a bigger problem I think and an accessibility expert shoudl check. The svg has a role presentation and aria-hidden true which removes the entire contents of the div from the accessibility tree
On a more complex workflow such as found with the sample data then it really starts to break
Add a transition by hovering over a stage -> drag from the dots to another stage.
I cant see how to do that
I have tested this item 🔴 unsuccessfully on 06a36ad
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46021.
Add a transition by hovering over a stage -> drag from the dots to another stage. I cant see how to do that
This is visible in dark mode but hardly in light mode.
@Dileepadari the line needs to have another colour
ah - i see it now (when in dark mode) - obviously something that cant be done without a mouse
There are shortcuts: ALT + m opens a transition window.
Trying out the front end and the workflow briefly opens and then closes with a permissions error. Tried with both a super user and an author
chrome_4AMhYvIUmP.mp4
Works for me. @brianteeman did you update your system with the latest fixes?
I had this effect some days ago but Dileep fixed that meanwhile
it should be as I was testing those latest fixes before I came across this. I will try a completely fresh checkout later
@Dileepadari I suggest to change the implementation of the graphic button in frontend and make it like other buttons. An icon with text as for example here:
I just did a complete fresh install and I still get the permission denied
What is the intended purpose of the graph button next to the workflow stage/transition select
I expected it to allow me to set the transition etc but it appears to be just a read only view of the workflow
I still get a problem with transitions being overlayed on top of each other
You can work around this by moving the transitions manually but you cant do that on the readonly views
There is also a problem with transitions being placed on top of stages to which they are not related
What does Change Focus Type mean
Hi @brianteeman , Thanks for testing the pr, The change focus Type mean changing the keyboard focus to different component - for examples from stages to transitions or transitions to zoom toolbar etc. If there is any other word that is more suitable, I'm happy to update it. Thank you .
then it doesnt work
When applying [6.1] Implementation of graphical workflow editor feature with patch tester, the Maintenance Database show error:
Joomla! 6 Content Management System. Site File 2 Problems 6.1.0-2025-11-29 ‎6.1.0-alpha4-dev.
Before continue testing I did the Update Structure of the database. After enabling Wokflows, the Graph button is not shown.
When i install the patch (via the apply patch), i get the following message: The file marked for modification does not exist: package-lock.json
.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46021.
Hi @Dileepadari,
Most features seem to work for me. Here are 3 potential issues I noticed:
- When I create a stage "A" and "B" and connect A to B a correct transition is created. But when I connect B to A, the direction of the created transition is still A to B.
- The shortcuts to add stages & transitions dont seem to work on my macbook. I tried the option-key instead of alt but it has no effect.
- The wording "Trash stage" seems unusual to me. Would have expected "Delete stage" or "Remove stage".
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46021.
@Johanv74 this pr cannot be tested with patch tester
Is there a way I can see whether or not the PR is available via the patch tester? The apply patch button is there.
not currently - i raised a feature request for this https://github.com/joomla-extensions/patchtester/issues
@Dileepadari First of all thanks a lot for this PR. I've seen your presentation in JUG London recently and was very impressed.
Please forgive us if we already leave review comments and suggestions while this PR is still in draft status, i.e. not ready for review.
But I thought I should give early feedback on the basic things so you can fix them early before the more fine grained reviews drop in.