Change Field Color as well as the Color of the Rectangle Shape Tool upon Click

[Christoph]

Hello everyone, in my template, there are multiple fields that initially appear grayed out when a new record is created. Upon clicking into any of these fields, I aim for the gray field to transition to white, accompanied by a red outline encircling the field. Additionally, positioned towards the right side of each field, there's a rectangular shape tool included for aesthetic purposes which I would like to change to red as well. To provide a clearer understanding of my vision, I've attached two screenshots for reference. As usual, many thanks.

[comment]

Modifying a field's appearance when in focus is easily accomplished by selecting the "In Focus" state in the Appearance pane of the Inspector and styling the field as necessary.

OTOH, making another layout object* change its appearance when a certain field gets focus is a rather complicated undertaking. See if you can achieve the desired look by styling the field alone. I believe a combination of border and shadow should produce the effect you show, or at least get very close.

---
(*) I am assuming that by "a rectangular shape tool" you mean an actual rectangle?

 

[Christoph]

1 hour ago, comment said:

(*) I am assuming that by "a rectangular shape tool" you mean an actual rectangle?

 

Thank you for sharing that info, comment. I hadn't considered how the pairing of "border and shadow" might meet my needs, so I'll experiment with that. Additionally, before this discussion, I experimented with "In Focus," which did achieve the effect you mentioned, although the layout object didn't quite work as expected. Also, regarding the "rectangular shape tool," I am referring to an actual rectangular shape.

[Christoph]

comment, Your concept of using a border and shadow as an alternative is a solid idea. It adds a subtle shadow effect within the field, which at first I wasn't a fan of but it is quite acceptable. However, I'm encountering an issue that I can't seem to resolve, despite correctly setting the "In Focus" parameter. In the first screenshot, the cursor is within the field, rendering it white with red borders, including the border and shadow, which is good. Yet, when I delete any text from the field, I'd prefer the red borders to vanish (as shown in the 2nd screenshot), leaving the field entirely gray. Is there a way to achieve this? The 3rd screenshot shows exactly what it does. Thank you!

[comment]

1 hour ago, Christoph said:

Is there a way to achieve this?

I don't think so. To override a field's style based on its contents you need to use conditional formatting - but conditional formatting will not be applied while the field has focus.

 

[Christoph]

I've been exploring Conditional Formatting, and it seems that applying "Value is Empty" with a Fill Color red gets me closer to what I need. However, I'm still grappling with the red outline and the layout object on the right side.

Thanks for the post!

[Christoph]

I'm almost there, but I'm struggling to achieve what feels like a simple solution. I've provided a screenshot with three examples and the desired end result. While I've managed to figure out examples 1, 2, and 3, I'm having trouble getting the top, left side, and bottom gray borders to turn red upon exiting the field (by pressing Enter on the keyboard).

The field consists of two parts: the field itself and a container on the right side for display only. I'm using a container because several fields are within portals, and unfortunately, the Web Viewer doesn't function within portals. Additionally, I can't apply Conditional Formatting to a rectangle, which feels like a limitation considering it's 2024.

Both the field and the container have Conditional Formatting, as depicted in the attached screenshot. This setup seems correct, as the container's formatting works perfectly. However, the field gray borders don't change as intended. I've also tried "In Focus" under Appearance but that doesn't seem to fix the problem.

I'm hopeful that someone can provide guidance on how to turn the gray borders red upon exiting the field. Thanks a lot for any assistance.

[comment]

I am afraid this is too confusing for me. 

Let me restate some of the governing principles here:

• The style applied in the Inspector is affected only by the field's display state (Normal/Hover/Pressed/In Focus);
• Conditional formatting is affected only by data (incl. environmental variables, e.g. current date);
• Conditional formatting is ignored when the field has focus;
• Conditional formatting cannot be used to turn a field's border/shadow on and off.

See also:
https://help.claris.com/en/pro-help/content/formatting-attributes.html

 

55 minutes ago, Christoph said:

I can't apply Conditional Formatting to a rectangle,

Well, no - although you can apply conditional formatting to a text object, and such object can contain a rectangle character ◼︎. 

1 hour ago, Christoph said:

which feels like a limitation considering it's 2024.

Keep in mind that Filemaker is primarily a database, not a graphics program. You can build some pretty awesome UI using the provided tools, but you can't have everything. The smart thing to do, IMHO, is to take full advantage of the features that are easy to implement (both in terms of development time and performance) and not insist on the extra 5% that will add 95% to the cost.

 

 

[Christoph]

1 hour ago, comment said:

I am afraid this is too confusing for me. 

I attempted to simplify this explanation as much as I could, but it seems I wasn't successful in making it easy to understand. My apologies.

1 hour ago, comment said:

Let me restate some of the governing principles here:

• The style applied in the Inspector is affected only by the field's display state (Normal/Hover/Pressed/In Focus);
• Conditional formatting is affected only by data (incl. environmental variables, e.g. current date);
• Conditional formatting is ignored when the field has focus;
• Conditional formatting cannot be used to turn a field's border/shadow on and off.

I've been testing some of these myself, and while I'm already familiar with most of them, I'm grateful for your inclusion here. It appears that the Inspector doesn't offer the functionality I'm seeking. If Conditional formatting isn't capable of toggling a field's border/shadow, what other options exist for adjusting these visual aspects?

1 hour ago, comment said:

See also:
https://help.claris.com/en/pro-help/content/formatting-attributes.html

I appreciate the link. Thanks.

1 hour ago, comment said:

Well, no - although you can apply conditional formatting to a text object, and such object can contain a rectangle character ◼︎. 

Keep in mind that Filemaker is primarily a database, not a graphics program. You can build some pretty awesome UI using the provided tools, but you can't have everything. The smart thing to do, IMHO, is to take full advantage of the features that are easy to implement (both in terms of development time and performance) and not insist on the extra 5% that will add 95% to the cost.

I agree with everything you've mentioned here, and indeed, FileMaker is fantastic for building practically anything. However, there are moments when I ponder why certain features weren't included. Granted, we can't have it all.

Thanks again for your input.

[comment]

4 hours ago, Christoph said:

If Conditional formatting isn't capable of toggling a field's border/shadow, what other options exist for adjusting these visual aspects?

If you mean what options exist for turning a border/shadow on and off based on anything other than a field's display state, I believe the answer is none. 

Sure, you could hack a fake border by placing an object behind the field and hiding it conditionally. But that's precisely where I would say it's too much effort for too little return. Much more so if the border should also depend on the field's display state. That would require script-triggered refresh on each field enter and exit and probably an array of variables to hold the current state of each field. That's exactly what I warned against in my very first post in this thread.

 

 

Edited May 31 by comment

[Christoph]

3 hours ago, comment said:

If you mean what options exist for turning a border/shadow on and off based on anything other than a field's display state, I believe the answer is none. 

Sure, you could hack a fake border by placing an object behind the field and hiding it conditionally. But that's precisely where I would say it's too much effort for too little return. Much more so if the border should also depend on the field's display state. That would require script-triggered refresh on each field enter and exit and probably an array of variables to hold the current state of each field. That's exactly what I warned against in my very first post in this thread.

It seems I've managed to get things working as I imagined. I simply opened up the container, moving it towards the left, and tucking it behind the field. Then, I adjusted the height of the field slightly. Now, when there's text in the field, I finally see the red border I wanted. When the text is cleared, both the field and container turn gray. I'm hoping that this method will make everything function as intended. I appreciate your advice and help with this, comment. Thanks.