Enable fields for editing

Ignition
1

Hello all,

I created a popup view to edit a record's data (from a SQL Server table), and am using text input fields to display the data. I would like to have them disabled by default, and if the user is ready to make changes click an 'Edit' button and enable the fields.

Two part question:
Is this a good way to go about it?
If so, I have attempted to use a message handler but the enabled prop doesn't seem to get the message.

self.props.enabled = payload['Enable']

I used 'Enable' as the key name in the button script:

def runAction(self, event):
	messageType = 'msg_enable'
	bool_enable = 'True'
	payload = {'Enable':bool_enable}
	system.perspective.sendMessage(messageType, payload)

Thanks,
Mike

2

You're writing a string into the bool_enable. You need to set it to True or False.
But also, I didn't think a table had an enable prop? Each of the columns do, which is likely what you're after

3 
def runAction(self, event):
	messageType = 'msg_enable'
	bool_enable = True  # boolean type
	payload = {'Enable':bool_enable}
	system.perspective.sendMessage(messageType, payload)

Have you verified the inputs are actually receiving the message? If you haven't verified this, check it. I recommend something like system.perspective.print("Heard") as the first line of the message handler. Also, as a common misconception, a lot of users expect message handling to work in the Designer but it does not - Message Handling only truly works in actual session; try you View in a true session if you've been using the Designer to test your content.

I made a note to use boolean True instead of string 'True', but as long as you're enabling and not disabling the string value should have been interpreted as True anyway.

4

I changed the value to boolean True
Added the print statement to the receiving handler.

attempted to use the preview mode in the Designer to see if the print statement would work - it does not.

Tested the changed code in session, nothing happens.

Or, I could use a view.custom.property, set the value to true on a button click event, and bind the enabled prop to that view.custom.property.

5

Then something is set up incorrectly - most likely the scope, but it could also be some sort of inconsistency in the names. Verify the message source (Button) and the listeners (Text Fields) are based in the same View (no embedding). If they are, then verify the Message Handler you have configured is msg_enable.

6

Interesting...
I set the scope to View, which should work as all components are in the same view, nothing embedded. The text fields and buttons are in different containers, however - perhaps that makes a difference.
After changing the scope to Page, it works as intended.
Good to know, thanks!

7

so, which method do you think would be better? Using the message handler or a custom property?

8

No, different containers should not matter. Is there any chance you could supply the JSON file of the View here?

9

This is of the view itself:

{"type":"view","payload":{"view":{"path":"Page/adm/UserEdit_PU","width":800.0,"height":800.0,"params":{"v_UserID":0}}}}

This is from the root:

[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column"
    },
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "justify": "space-around",
          "alignItems": "center"
        },
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "basis": "90px"
        },
        "custom": {},
        "children": [
          {
            "type": "ia.input.button",
            "version": 0,
            "props": {
              "text": "Edit"
            },
            "meta": {
              "name": "Edit"
            },
            "position": {
              "basis": "106px"
            },
            "custom": {},
            "events": {
              "component": {
                "onActionPerformed": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tbool_enable = True\n\tself.view.custom.v_Edit=bool_enable"
                  }
                }
              }
            }
          },
          {
            "type": "ia.input.button",
            "version": 0,
            "props": {},
            "meta": {
              "name": "Button_0"
            },
            "position": {
              "basis": "106px"
            },
            "custom": {},
            "events": {
              "component": {
                "onActionPerformed": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tmessageType = 'msg_enable'\n\tbool_enable = True\n\tpayload = {'Enable':bool_enable}\n\tsystem.perspective.sendMessage(messageType, payload)"
                  }
                }
              }
            }
          },
          {
            "type": "ia.input.button",
            "version": 0,
            "props": {},
            "meta": {
              "name": "Button_1"
            },
            "position": {
              "basis": "106px"
            },
            "custom": {}
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {},
        "meta": {
          "name": "FlexContainer_0"
        },
        "position": {
          "basis": "258px"
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column"
            },
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "basis": "200px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "First"
                },
                "meta": {
                  "name": "FirstName"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Last"
                },
                "meta": {
                  "name": "LastName"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "User Name"
                },
                "meta": {
                  "name": "UserName"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Email"
                },
                "meta": {
                  "name": "EmailAddress"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Role"
                },
                "meta": {
                  "name": "Role"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column"
            },
            "meta": {
              "name": "FlexContainer_0"
            },
            "position": {
              "basis": "200px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {},
                "meta": {
                  "name": "FirstName"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'First Name'], \"none\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.custom.v_Edit"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {},
                "meta": {
                  "name": "LastName"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'Last Name'], \"none\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.custom.v_Edit"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {},
                "meta": {
                  "name": "UserName"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.style.backgroundColor": {
                    "binding": {
                      "config": {
                        "expression": "if({view.custom.v_new}=1,\"#FFFFFF\",\"#000000\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'User Name'], \"none\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.custom.v_Edit"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {},
                "meta": {
                  "name": "EmailAddress"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'Email'], \"none\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.custom.v_Edit"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {
                  "enabled": false
                },
                "meta": {
                  "name": "Role"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'Email'], \"none\")"
                      },
                      "type": "expr"
                    }
                  }
                }
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column"
            },
            "meta": {
              "name": "FlexContainer_2"
            },
            "position": {
              "basis": "200px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Title"
                },
                "meta": {
                  "name": "Title"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Department"
                },
                "meta": {
                  "name": "Department"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Notes"
                },
                "meta": {
                  "name": "Notes"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {}
              },
              {
                "type": "ia.input.checkbox",
                "version": 0,
                "props": {
                  "text": "Gone?"
                },
                "meta": {
                  "name": "UserGone"
                },
                "position": {
                  "basis": "36px"
                },
                "custom": {},
                "propConfig": {
                  "props.selected": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'Gone'], \"none\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.custom.v_Edit"
                      }
                    }
                  }
                }
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column"
            },
            "meta": {
              "name": "FlexContainer_1"
            },
            "position": {
              "basis": "200px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {},
                "meta": {
                  "name": "Title"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'Title'], \"none\")"
                      },
                      "type": "expr"
                    }
                  },
                  "props.enabled": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.custom.v_Edit"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {
                  "enabled": false
                },
                "meta": {
                  "name": "Department"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'Department'], \"none\")"
                      },
                      "type": "expr"
                    }
                  }
                }
              },
              {
                "type": "ia.input.text-field",
                "version": 0,
                "props": {
                  "enabled": false
                },
                "meta": {
                  "name": "Notes"
                },
                "position": {
                  "basis": "50px"
                },
                "custom": {},
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "config": {
                        "expression": "try({view.custom.userView}[0, 'Notes'], \"none\")"
                      },
                      "type": "expr"
                    }
                  }
                },
                "scripts": {
                  "customMethods": [],
                  "messageHandlers": [
                    {
                      "messageType": "msg_enable",
                      "script": "\t# implement your handler here\n\tself.props.enabled = payload['Enable']",
                      "sessionScope": false,
                      "pageScope": true,
                      "viewScope": false
                    }
                  ],
                  "extensionFunctions": null
                }
              }
            ]
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {},
        "meta": {
          "name": "FlexContainer_1"
        },
        "position": {
          "basis": "101px"
        },
        "custom": {}
      }
    ]
  }
]
10

If you take a look at the notes text field, that is where the message handler resides

The rest of the text fields I bound to the custom.v_Edit property

11

I should have been more clear: I was hoping for the View in its non-working state. I'll modify it to be in the state I believe you were in and see what happens.

12

When I set the sendMessage invocation to use a scope of "view" and I set the message handler to listen at the View scope it works as it should. I suspect you were allowing for sendMessage to use the default scope which is "page", but without the View being in the non-working state I can only guess that's what it was..

13

A default of Page scope... yep, that is probably the issue I had. Thanks again!

1 Like