Creating a Mentions Function in within Comments Functionality (CMMS Project)

Ignition
, , ,
1

I'm working on building out a CMMS with Vision Windows for my team and as you might be able to tell from the photo, the way to mention someone is a little......clunky. Clicking a username in the list adds the username to a label component below the text area component where the comment goes. It gets the job done, but I need to start planning for MVP+.

I'd like to implement what most team-oriented applications do with mentions and utilize a dynamic popup menu when @ is pressed, while having it drill down as more keys are pressed.

I thought about exploring a keyReleased trigger in the text area component where @ would open a window that would essentially be a list component or something similar, but I haven't explored that option yet (and I don't particularly love the list component).

Anyone tried to tackle this before?

Sidenote: Before I even thought about creating a comments function, I looked up trying to integrate Microsoft Teams on this forum and unless I missed an article, it didn't look like a great option. So this is what I came up with. Any critiques/advice is 100% encouraged.

Screenshot 2024-09-20 160900
Screenshot 2024-09-20 1609001239Ă—554 101 KB

2

Do have the similar problem statement, Are there any nice solutions ?

3

I don't imagine that a moving a list component around is the correct choice here, but it could probably be done effectively with a simple popup menu.

Example:
First, add a dataset custom property to the text area and populate it in some way, so it has a column called username.

Then, use the following script on the text area's mousePressed event to generate the popup when the '@' key is pressed:

if event.shiftDown and event.keyCode == event.VK_2:
	from java.awt.event import MouseEvent
	userData = event.source.userData
	userNames = list(userData.getColumnAsList(userData.getColumnIndex('username')))
	innerTextArea = event.source.viewport.view
	characterBounds = innerTextArea.modelToView2D(innerTextArea.caretPosition)
	mouseEvent = MouseEvent(
		innerTextArea,
		MouseEvent.MOUSE_CLICKED,
		system.date.toMillis(system.date.now()),
		0,
		int(characterBounds.x),
		int(characterBounds.y),
		1,
		False)
	
	def insertName(name):
		return lambda typeName: innerTextArea.insert(name, innerTextArea.caretPosition)
	
	menu = system.gui.createPopupMenu(userNames, [insertName(name) for name in userNames])
	menu.show(mouseEvent, int(characterBounds.x), int(characterBounds.y))

Result:
atFunctionDemo

9 Likes
4

Wonderful solution !! @justinedwards.jle Request you to make it as Ignition exchange contribution.

5

Go for it. Finish developing that thing into whatever it's supposed to be, and let us know when we can download it.

2 Likes
6

@ mention, the solution you gave for Vision worked great! I'm now looking for something similar in Perspective—any way we can do that too?

7

I'm sure there is, but unfortunately, the right people probably aren't going to see it in this post since it's tagged Vision. I recommend creating a separate post and tagging it Perspective, so the Perspective gurus will notice the question and give you a proper answer.

8

Thanks @justinedwards.jle

Here's the post link asking for similar feature in perspective.

1 Like