Override add overlay button

[Timothy_Gandion]

So I newly created an app, a time-in-time-out system. I want to be able to override the add icon below and turn it into a “time in” or “time out” button that automatically saves to my Google Sheets (since the system-generated add action below has to open a form first before saving). How do I do that? I created my own behavior that does this but it’s always this add action button that shows up.

[WillowMobileSys]

Unfortunately, there is not a way currently to override or replace the default Add button. A feature request has been opened for this.

Maybe we can offer alternatives? How are storing the “Time In” and “Time Out”?

• separate tables - one for In and one for Out
• single table but separate rows for In and Out
• single row with In/Out columns

[Timothy_Gandion]

single table but separate rows for In and Out

[WillowMobileSys]

Then I assume you have a single column that you set for In or Out? If so, then you could use the “Plus” button as is and auto-populate the In/Out value.

Assuming you are capturing daily In/Outs, you can check if no time records exist and if none auto-set value to “In”. If an “In” row exists then set to “Out”.

If there could be multiple In/Outs then check that the count for each is equal or not equal - equal means default to “In” and not-equal default to “Out”.

I hope this helps!

[Timothy_Gandion]

Thanks but I don’t want user to be able to tamper with the inputs, but he must save right away. How do I do that?

[WillowMobileSys]

If you are using a Form, You would place the expression to auto-set “In” or “Out” in the App Formula. Users cannot change values set this way. You would probably want to do the same with the captured Time. Then basically the user taps the “Plus” button and then taps “Save”.

If you are only saving a timestamp, this is obviously, this is less than ideal.

Is there any other info a user needs to provide to time in or out?

[Aleksi]

If you set the option “Prominence” as “Do not display” and then you create your own “Adds” button with the LINKTOFORM(…), you are able to overwrite the system generated “Adds” button. Or do I misunderstand the request?

[Timothy_Gandion]

Close enough. I don’t wanna link to form. I wanna populate data in the background and save right away upon clicking button.

[WillowMobileSys]

There is another option I have seen others use. Create a Gallery view as the main view and treating each gallery item as a button. You use the “Row Selected” behavior to attach a custom action.

In your case the idea might be to have two gallery items, one for “In” and one for “Out”. You could use the logic I explained above to show/hide the gallery items. When a gallery item is tapped, it runs your attached custom action to create the proper time entry row. And then the view switched to show the other gallery item. A neat side-effect of using this approach is that the gallery items can be images so you can use ANY image as your displayed “button”.

Here is an example post with a sample image showing several gallery items being used as buttons.

Gallery view - possible to "disable" one image? Questions

We developed an app for the use by the public and had planned on only posting the link when we activate and plan to open evacuation centers. Now I’m toying with the idea of having the app available all the time, but in order to do this I would need to disable the “form” until we activate. What is the easiest way to do this? I want them to know about the form so they return to the app to complete it so I didn’t want to completely remove it from the home page. If I create a confirmation messag…

[Timothy_Gandion]

So I’ve made it in the way you suggested it. But is there a way to display details even if the IN and OUT times are still empty, like below?

[WillowMobileSys]

Timothy_Gandionco:

So I’ve made it in the way you suggested it

Which suggestion are you using?

Timothy_Gandionco:

But is there a way to display details even if the IN and OUT times are still empty, like below?

I am a little confused here and unclear about your data structure. Could you post an image of your Time AppSheet tables with the columns defined? I can help you better that way.

[WillowMobileSys]

Maybe I am wrong but I didn’t think we could get our own actions to show up on Table and Deck views as overlay - effectively replacing the system Add button in those views (see example image above). Custom “Overlay” buttons only show on Detail views.

[Aleksi]

@WillowMobileSystems You are able to use your own Overlay action with the table view if it doesn’t have anything to do with the existing records… like if you want to open a form view with the LINKTOFORM(). This app is for example doing that…

[WillowMobileSys]

Oh, wow! Then I stand corrected. I am sure I tried this before but obviously didn’t do something right. I’ll try it again now.

Aleksi:

If you set the option “Prominence” as “Do not display” and then you create your own “Adds” button with the LINKTOFORM(…), you are able to overwrite the system generated “Adds” button. Or do I misunderstand the request?

From this post I get that we set the system action to “Do Not Display”. But what is required to get the custom button to show instead?

[Aleksi]

You need to set it as “Display Overlay”

[WillowMobileSys]

Ok, I see how it works now. That overlay action must be non-row specific which makes sense.

@Timothy_Gandionco.

There isn’t an action to simply “add a row”. There is an “add a row based on values from this row” but that means the action acts on a specified row and can’t be used as an overlay action in a Table or Deck view.

In your case, you could use @Aleksi 's approach with launching the Form with your own custom overlay actions solely for the purpose of using a different action icons - one for in and one for out. You can also pre-set column values when navigating to the Form. I would think you still would want to show/hide the actions based on user status as already in or out. And as such, the same expressions simply move to the actions’s behavior to show/hide the actions. From a users perspective, it is still a click to open the Form and a click to Save.

To get to a design where a single click adds an in/out record, it seems the Gallery View might be the best option.

[Timothy_Gandion]

WillowMobileSystems:

Which suggestion are you using?

The gallery suggestion

WillowMobileSystems:

I am a little confused here and unclear about your data structure. Could you post an image of your Time AppSheet tables with the columns defined? I can help you better that way.

Here they are

TimeFilter is the table for displaying Time In and Time Out.
TimeMode is the table for IN and OUT
TimeInOut is the table for all IN and OUT transactions

[WillowMobileSys]

I think you may have made this a lot more complicated than it should be. The TimeFilter and TimeMode tables are really representative of activities you expect to perform on the TimeInOut table. You will find yourself implementing a LOT of extra functionality in order to keep those tables populated and/or updated.

I would recommend having only two tables - an Employees table and the TimeInOut table.
The TimeInOut table would have a Ref column to the Employee table from which you can pull the Employee Email and/or Name.

Based on your sample view, I would also recommend that instead of separate In and Out records, have In and Out columns. This neatly ties the In and Out times together making it easier to display them in your view.

Filtering, if still needed after these changes, is accomplished by either a FILTER() function or a Slice.

In am not 100% clear on what Mode means. If it is determining In/Out mode, that can be derived from the state of the data - especially if you use In and Out columns. So, no table required.

[Timothy_Gandion]

So you mean to say, every day has its own row of in and out inside TimeInOut table? Is there a way to automatically insert a dummy row when a new day starts, or upon opening app?

[WillowMobileSys]

Timothy_Gandionco:

So you mean to say, every day has its own row of in and out inside TimeInOut table?

Yes or a new record for each In/Out session - for lack of better term. For example, some might have an In/Out before lunch break and another In/Out after.

Timothy_Gandionco:

Is there a way to automatically insert a dummy row when a new day starts, or upon opening app?

I don’t think you need a dummy record.

What I would do is use a table to setup the Gallery View. Ahhh, maybe this is what you intended for the TimeMode table?

The idea is to show these Gallery table rows as “buttons” in the Gallery view. At the start of the day, an employee would only see the In “button”. When tapped a new TimeInOut row is added and populated with the In time and user info. The Gallery view then detects this incomplete row and automatically shows the Out “button” and hides the In “button”. When the Out “button” is tapped, the incomplete row is updated with the Out time. Once the TimeInOut row is completed, the Gallery view again switches to show only the In “button”.

---

This is of course a simplified description. Implementation is not difficult. But being new, there will be a small learning curve to get the necessary actions created and working correctly.

Is any of this helping?

[Timothy_Gandion]

Yes I’m getting the idea. It’s the implementation that’s my issue. How do I make the “In” button show at the start of the day? You can’t display 2 tables at the same time. I still wanna show time in as --:--:-- by default.

[WillowMobileSys]

Timothy_Gandionco:

You can’t display 2 tables at the same time.

AppSheet does have the concept of a dashboard which allows you to display two, or more, views simultaneously.

Timothy_Gandionco:

I still wanna show time in as --:--:-- by default.

Ok, so this is a requirement? The app MUST be able to show an “Attendance for Today” view, as in your example above, when no time entries have yet been made for the day? I see now why you were suggesting a dummy record.

If not a requirement, I think what I would do is use a dashboard with the In/Out buttons at the top and below is a table showing the Attendance History. This gives a user much more information at a glance.

[Timothy_Gandion]

WillowMobileSystems:

Ok, so this is a requirement?

Yes it’s a requirement.

WillowMobileSystems:

AppSheet does have the concept of a dashboard which allows you to display two, or more, views simultaneously.

Sadly I can’t hide the header in dashboards. And I don’t want them to redirect to another page upon clicking.

[WillowMobileSys]

I have been playing with this trying to implement the sample view you provided with the requirements you have imposed.

Unfortunately, I do not think it is possible to get the exact implementation you are looking for. With some compromise, you can certainly get the same results.

As I understand it, you wish to open directly to your sample view. To create the view you propose requires using a Detail view. However, Detail views require a single row reference to display. Normally, through navigation in the app, that row reference is passed to the Detail view.

As far as I know, there is not a way to open the app to a Detail view with some pre-selected row reference. Even If the view were based on a Slice with only a single row, that Slice is a LIST of 1 row reference as opposed to the row reference itself.

If someone knows how this can be done, please chime in.

A compromise could be opening to some view with a way to navigate to the desired Detail view. If you have plans for other features within the app, this might be the way to go.

If we can solve that problem of opening to a Detail view with a row already displayed, then you would be golden. You can use Inline Actions to add Time In and Time Out. Below is a view I created showing this. Note the green Time In button in left-hand image and red Time Out button in right-hand image.

[Steve]

Wait, what’s going on here? Can someone summarize the goal?

[WillowMobileSys]

As I understand it, the requirement is for a user to be presented a view like that shown in post #15 of this thread on initial opening of the app. With the “–:--:–” values for in and out.

The user would tap/click some Time In action (inline, overlay, etc) and a new row is added (or possibly updates some pre-existing row) for the day with Time In populated. The user stays on the view and later taps/clicks some Time Out action to complete the attendance record for the day.

Initially the thought was separate in and out rows but after seeing the required view, I advocated for In and Out columns.

Its very simple in concept but I am not seeing how it can be achieved as stated without some compromises.

Any ideas?

[Giuseppe_Nugara]

I think you can do that creating a SLICE table of your dataset and for each SLICE you can assign the action you want to show overlay. After that you can create a View for each SLICE you need.

[Aleksi]

@Timothy_Gandionco @WillowMobileSystems
Please check the sample app called “Punch In or Out” from www.appsheet.com/portfolio/531778. It sounds that you are looking for an app like that.

[WillowMobileSys]

Yes, I agree there are many other ways to get the same results. I was trying to stay within the design and constraints specified.

@Timothy_Gandionco It seems you might need to compromise on design. Is there something else acceptable for your app?

[Timothy_Gandion]

Yep. I’ve practically made two versions:

Time in/out

v1

v2

Summary

v1

v2

[WillowMobileSys]

With the help of @Grant_Stead, it turns out I was wrong about how the Detail View behaves. It WILL show rows based on a slice at app start-up…even if more than one row. It will simply use an ANY() function to effectively select the first row.

My issue was, even though the test of the Slice seemed to return the correct row, at run time of the app, the Slice was actually returning NO rows. I mention this only because it’s something we all need to be aware of - test of slice doesn’t necessarily match app run time. In my case I had a mis-match between what the Slice expected and the action updates that led to no rows returned. Once I got that right then it was just a matter of tweaking to get the Action icons to show at expected states of the row.

The main trick is getting the Slice to return the correct data row. I used an expression like this:

IF(COUNT(SELECT(Attendance[Attendance ID], AND([Employee].[Email] = USEREMAIL(), DATE([Time In]) = TODAY()))) = 1,
      AND([Employee].[Email] = USEREMAIL(), DATE([Time In]) = TODAY()),
       [Attendance ID] = "3c61ffa5"
)

That last part, [Attendance ID] = "3c61ffa5", is the reset row. A single dummy row, similar to what you had suggested, that each user will see to start the In/Out procedure.

My “Time In” action shows the green icon and ADDS a new data row for the user, populating the logged in user and the Time In value.

The “Time Out” action shows the red icon, assumes the Slice has done its job in selecting a row with only the In time completed and UPDATES the row’s Time Out.

To get the “–:--:–” part of the design, I manage the In and Out times as TEXT, not DateTime.

I then end up with the following sequence of views for a user. I didn’t bother disabling the Edit action for my testing. Of course, for this app it should be removed.

Initial Day View

Immediately after clicking Time In action - set for Time Out - Note update still in progress.

Immediately after clicking Time Out Action - remains for user for rest of day - next day will reset

---

Once this basic processing flow is established, then the app can be enhanced to accommodate many variations of the In/Out process.

[Timothy_Gandion]

Yep this is how it works in the v2 of my app, the detailed view. Thanks for all your inputs.
Last. Can I center this text?

[Aleksi]

The closest I can think because of original specs, would be this one. You can find the sample app called “Punch In Out From Table View”