App Designer - Aligning UI components with lines in a multiline text area

I'm essentialy trying to create an app that acts as a debugger for a different programming language, FORTRAN to be specific. Feel free to suggest a different route for this if you can think of one, but downloading a separate program to do this is not an option due to certain restrictions. I want to have a text area where a script can be edited, and have a checkbox or some clickable UI component next to each line that I can use to insert breakpoints, just like the MATLAB script editor interface.

I tried including a List Box next to the script area, but I couldn't get the line spacing to match up. I tried including a Text Area with a hyperlink on each line, but it doesn't look like hyperlinks are possible. I could try programatically inserting a checkbox next to each line, but the alignment needs to be perfect and the line spacing of a Text Box seems to change between the editor and the launched app, so I feel like that would be an error-prone solution. It's important that the script area perform just like a normal text editor, so I'd rather avoid using a List Box workaround or something similar.

Answer 1

[Sivani Pentapati]

Hi Philip,

Based on my understanding you want to embed editor with breakpoints in App designer. Currently we are not supporting editor with breakpoints as UI component in App Designer. I have brought this issue to the notice of the concerned people and it might be considered for a future release.

There is a temporary workaround where you can group a text field and check-box button into one component, duplicate this component and align all the duplicates vertically. This would create a dedicated checkbox for each line of the code. Attaching the code for a sample application for your reference.