Back Button to go to the previous page

Ask the community
1

Hi all

I am hoping someone can help

I have multiple pages linking to one. I would like to add a “back” button so the user can go back to the page they came from (rather than using the browsers back button)

Any ideas?

2

This is doable but it’s hard to suggest a specific path without knowing more about why you want to do this.

Here are a few questions I have:

  • Do you want this button to do the exact same thing as the browser’s Back button? Or do you want it to always go back to the “one” page you mentioned?
  • If you want it to do the exact same thing as the browser’s back button, why duplicate it?
  • If you don’t want it to do the exact same thing, then perhaps a link back to the “one” page would work just as well?
  • Maybe breadcrumbs would work better?
3

Hi!
Add a custom code block
And insert exactly this:
<button onclick="history.back()">Go Back</button>

Sorry for this “windows98” style for the button but this is the most effective way I can offer without going into details. It does the job!

Also, a button from a list details blocks, linked to an airtable formula (or a url) can do the trick. Are your pages linked between each other by a list page=>details page pattern?

If you want more, I suggest you to answer David’s questions, he can be of a great help

5 Likes
4

**Update: **
Create a fully customizable button with a ‘go back’ function.

The text of the button is set inside <button>...<Go back></button>

You can play with all the style options (example: to make the button left aligned, change the float to left).
Font weight can be changed with the following values: 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900. 400 being normal font weight and 700 being bold font weight.

To insert in a custom code block:

<button id="myButton">Go back</button>

<style>
  #myButton {
    width: 120px;
    height: 40px;
    background-color: #000000;
    border-radius: 10px;
    padding: 10px 20px;
    margin: auto;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    float: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #myButton:hover {
    background-color: #FFFFFF;
    color: #000000;
  }
</style>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    window.history.back();
  });
</script>
5 Likes
5

Matthieu, you saved me so much work with this beautiful solution. I’ve created an account just to say thanks man!!

1 Like
6

You’re welcome Rob!

7

Hey @matthieu_chateau do you know if & how it would be possible to only show a back button like this when members are using the PWA version of the app when back navigation is least obvious? Thanks in advance!

1 Like
8

Hi Kevin,

What would be the exact use case regarding PWA? Only show a back button on mobile window size or really on PWA? (PWA being also possible on desktop window size)

9

Hey!

The goal would be to show the back button on desktop PWA’s since otherwise there’s no clear way to go backward without using a keyboard shortcut that most users wouldn’t know to use. I suppose it wouldn’t hurt to have a back button of some sort on mobile either since swiping back isn’t a known behavior to all users either. Similar to how on mobile apps you’d have a back arrow in the top left of the screen that was pushed on? For now, I’d settle for a back arrow on desktop devices (ideally in the top left corner, or in a bar that is fixed to the bottom of the screen (like on android devices). Just trying to facilitate PWA navigation for users.

10

This is also needed on modals:

11

You would need to use the code I provided above in order to do so and to place it in every page that needs it.

No other solution. I don’t have any knowledge of differentiating PWA from non PWA by the way. PWA being an app opened in a browser too.

Differenciating between PWA and non PWA is not relevant from my experience => using the back arrow from the browser is not an ideal user experience. SO it can be for PWA and non PWA version of the app.

12

I can’t think of many web apps that have a back arrow is all — it’s normally only something you see on native apps that don’t have the browser’s built-in navigation tools. There must be a way to differentiate whether or not the user is using the PWA or not, otherwise how would you differentiate whether or not to show the Download PWA button? What’s the logic for showing that button? Can I just reverse that button’s logic?

13

The download PWA button is displayed thanks to a third party tool. PWA feature in Softr is made with this third party tool.

The only thing I found that could (no guarantee) work is this code, though I don’t have a clear indication if the script needs to be inserted in the footer or in the header (to be tested):

<button id="myButton" style="display: none;">Go back</button>

<style>
  #myButton {
    width: 120px;
    height: 40px;
    background-color: #000000;
    border-radius: 10px;
    padding: 10px 20px;
    margin: auto;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #myButton:hover {
    background-color: #FFFFFF;
    color: #000000;
  }
</style>

<script>
  function showBackButton() {
    document.getElementById("myButton").style.display = "block";
  }

  function hideBackButton() {
    document.getElementById("myButton").style.display = "none";
  }

  if (window.matchMedia('(display-mode: standalone)').matches) {
    showBackButton();
  } else {
    hideBackButton();
  }

  document.getElementById("myButton").addEventListener("click", function() {
    window.history.back();
  });
</script>