Multiline text input

Is there a way to add a multiline text input in an app?

are you asking how to put a multiline on screen? like info for an app install instruction?
Try \n I think is really all thats necessary.
If your trying to concatenate long lines, for example, here's a css chunk example:
void configure() {
if (debugEnable) log.trace "configure()"
sendEvent(name:"last5", value:'' +
'.last5 {\n' +
' display: block\n' +
' color:' + "${existingTileFontColor}" + ';\n' +
' text-align:' + "${existingTileHorzWordPos}" + ';\n' +
' font-size:' + "${existingTileFontSize}" + '%;\n' +
'}\n' +
'\n' +
'')

No in this app, I'd like to be able to enter multiple lines in an input text box. The text will be taken from either an instance of the same app on another hub, or from a third party website, and will then allow a moderately complex set of data to be imported.

This is for [BETA] Simple State Machines - I'm taking over development and have already provided a way of producing Mermaid output for diagramming purposes e.g. the Mermaid text

stateDiagram-v2
    state "In bed" as s1
    state "Out" as s2
    state "Ascending" as s3
    state "Descending" as s4
    state "Awake" as s5
    state "In Hall" as s6
    state "In Kitchen" as s7
    state "In Lounge" as s8
    s2-->s6:Enter Front Door
    s2-->s7:Enter Back Door
    s7-->s6:Hall Motion
    s6-->s7:Kitchen Motion
    s6-->s3:Landing Motion
    s8-->s4:Landing Motion
    s4-->s6:Hall Motion
    s3-->s8:Lounge Motion

ends up as

What I'm hoping to be able to do is take the Mermaid text and import it into another instance of the app on a second hub (or possibly the same hub) in order to recreate the state machine.

1 Like

AIR WOOSHING thats the sound of my waving my hand horizontally over my head....

Clearly, not in need of my beginner comments!

input "myText", "textarea", title: "Enter multi-line text here"

For example, see Notes at bottom of Rule 5.1 page. The textbox can be resized, or its initial size set like this:

input "myText", "textarea", title: "Enter multi-line text here", rows: 10

Even its width can be set with width: 6

7 Likes

Ah, brilliant! Thanks very much Bruce,

That reminds me of another question, what exactly does the width parameter mean? What units is that? And does it mean the same for buttons as it does for text fields?

If I get some time I'll see if I can add the documentation for some of this stuff, since it seems to be completely missing at present.

I've been slacking on my commitment to the docs. I think I may have only added one or two entries so far.

the width parameter does what it sounds like it does. The width of an entire screen varies by device. For a phone in portrait orientation, it is 4 wide, in landscape it is 8 wide. A desktop is 12 wide. There is also newline: true That's useful when the layout might be a bit off unless you force a new line.

Generally this works for buttons, although the basic size of a button depends on the text in it. Width determines the amount of horizontal space the selector can take up, out of the available space for that line.

1 Like

@bravenel @support

I am having a problem with 'textarea' shrinking during refreshes if there are too many lines and the scroll bar is present. It will continue shrinking width until almost invisible.

I am using Chrome on a MAC.

Here is the simple test app:

definition(
    name: "hubitatTest",
    namespace: "hubitat",
    author: "bloodtick",
    description: "Test a textarea",
    category: "Convenience",
    iconUrl: "",
    iconX2Url: "",
    singleInstance: false
){}

preferences {
    page name:"pageMain"
}

def installed() {
    initialize()
}

def updated() {
    initialize()
}

def initialize() {
    logInfo "${app.getLabel()} executing 'initialize()'"
}

def uninstalled() {
    logInfo "${app.getLabel()} executing 'uninstalled()'"    
}

def pageMain(){
    
    return dynamicPage(name: "pageMain", install: true,  refreshInterval:0) {
        
        section("Test Section") {
            input(name: "pageMainTextArea", type: "textarea", title: "title:", description: "description", rows: 20, width: 6, submitOnChange: true, newLineAfter:true)
            input(name: "pageMainButton", type: "button", title: "Press Me", width: 2, style:"width:75%;")
         }        
    }    
}
1 Like

@support @bobbyD @bravenel

Not sure who to tag for support on the above bug.

Interesting. It has to do with the button.

@bobbyD @bravenel @support

Not sure how to tackle that -- any chance this can be fixed or workaround?

Yeah, we're going to fix it.

2 Likes