How to use link of JSON footer in SharePoint list form's on mobile

Question

How to use link of JSON footer in SharePoint list form's on mobile

Andrea Oh 60

I made a JSON footer as a link on it in SharePoint list.

But it's not working on mobile SharePoint.

Actually it worked(screen was changed) but I can't go back to list when I click back(undo) on Mobile.

Is there a way to do it?

Hi, @Gabriel-N

I can't add comment on your answer. So, I edited my question with JSON as below.

{

"elmType": "div",

"style": {

    "display": "flex",

    "flex-direction": "column",

    "align-items": "flex-start",

    "font-size": "12px",

    "width": "100%",

    "gap": "10px"

},

"children": [

    {

        "elmType": "div",

        "style": {

            "display": "flex",

            "align-items": "center",

            "padding": "10px",

            "gap": "10px"

        },

        "children": [

            {

                "elmType": "span",

                "attributes": {

                    "iconName": "ZoomIn"

                },

                "style": {

                    "color": "#106ebe",

                    "font-size": "20px"

                }

            },

            {

                "elmType": "a",

                "txtContent": "재무성과 가이드 보기",

                "attributes": {

                    "href": "https://onevirtualoffice.sharepoint.com/sites/SiteNameHere/SitePages/Sitepagename.aspx?ms-openexternal=true",

                    "target": "_blank"

                },

                "style": {

                    "font-size": "12px",

                    "font-weight": "bold",

                    "color": "#106ebe",

                    "text-decoration": "underline"

                }

            }

        ]

    },

I tried

"href":"https://onevirtualoffice.sharepoint.com/sites/SiteNameHere/SitePages/Sitepagename.aspx?ms-openexternal=true",

"href":"https://onevirtualoffice.sharepoint.com/sites/SiteNameHere/SitePages/Sitepagename.aspx",(Encoding, Decoding)

"href":"https://onevirtualoffice.sharepoint.com/sites/SiteNameHere/SitePages/Sitepagename.aspx?source=https%3A%2F%2Fonevirtualoffice.sharepoint.com%2Fsites%2FSiteNameHere%2FLists%2FListNameHere%2FNewForm.aspx",

Accepted answer

0 additional answers

Your answer

Answer 1

Gabriel-N 2,995 Microsoft External Staff Moderator

Hi Andrea Oh

Thank you for reaching out to the Q&A forum. To better assist you, could you please provide the full JSON script you implemented? This will help us understand the structure and behavior more precisely. If the script contains sensitive information, feel free to leave a comment and I will contact you via private message instead. That way, we can review it securely and offer targeted guidance on resolving the mobile navigation issue.

Looking forward to your update.

Andrea Oh 60 Reputation points

2025-07-04T05:25:18.7233333+00:00

"elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "flex-start", "font-size": "12px", "width": "100%", "gap": "10px" }, "children": [ { "elmType": "div", "style": { "display": "flex", "align-items": "center", "padding": "10px", "gap": "10px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "ZoomIn" }, "style": { "color": "#106ebe", "font-size": "20px" } }, { "elmType": "a", "txtContent": "재무성과 가이드 보기", "attributes": { "href": "https://onevirtualoffice.sharepoint.com/sites/SiteNameHere/SitePages/Sitepagename.aspx?ms-openexternal=true", "target": "_blank" }, "style": { "font-size": "12px", "font-weight": "bold", "color": "#106ebe", "text-decoration": "underline" } } ] },
Gabriel-N 2,995 Reputation points Microsoft External Staff Moderator

2025-07-04T06:13:57.6233333+00:00

Thank you for your response. Please allow me some time to test it, and I’ll follow up shortly.

Gabriel-N 2,995 Microsoft External Staff Moderator

Hi Andrea Oh,

Thanks again for sharing your code, it's really well done! I made just a small adjustment that might help with mobile navigation in the SharePoint app.

If you remove "target": "_blank" from the JSON, it should allow users to return to the previous screen more smoothly when using the back button. I tested this on my device running iOS 18.5 and it worked nicely.

Just a heads-up: this change brings users back to the previous page, but it doesn’t switch directly to the main list view. Hopefully, this tweak helps with what you were trying to achieve.

Here’s the full code for reference below.

{
   "elmType": "div",
   "style": {
       "display": "flex",
       "flex-direction": "column",
       "align-items": "flex-start",
       "font-size": "12px",
       "width": "100%",
       "gap": "10px"
   },
   "children": [
       {
           "elmType": "div",
           "style": {
               "display": "flex",
               "align-items": "center",
               "padding": "10px",
               "gap": "10px"
           },
           "children": [
               {
                   "elmType": "span",
                   "attributes": {
                       "iconName": "ZoomIn"
                   },
                   "style": {
                       "color": "#106ebe",
                       "font-size": "20px"
                   }
               },
               {
                   "elmType": "a",
                   "txtContent": "재무성과 가이드 보기",
                   "attributes": {
                       "href": "https://onevirtualoffice.sharepoint.com/sites/SiteNameHere/SitePages/Sitepagename.aspx"
                          },
                   "style": {
                       "font-size": "12px",
                       "font-weight": "bold",
                       "color": "#106ebe",
                       "text-decoration": "underline"
                   }
               }
           ]
       }
   ]
}

Let me know how it goes or if you'd like to explore other options!

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

User's image

Andrea Oh 60 Reputation points

2025-07-07T00:08:49.19+00:00

Hi, @Gabriel-N

Thank you for your response.

If I remove "target": "_blank" then web users get in trouble. Web users want to open it in a new tab.

SPO Mobile pages are worked page by page(Single page appication)

My real question / purpose is, how can I navigate with JSON link to pages in menu navigation bar.
Gabriel-N 2,995 Reputation points Microsoft External Staff Moderator

2025-07-07T11:47:48.72+00:00

Hi Andrea Oh,

Thank you for your response. I may have misunderstood your point, but I tested the code on my device and it worked well in two different browsers. Could you let me know which device and browser you're using to run this code?

Also, may I ask where you got this code from? When I tested this specific snippet independently, it worked fine. It’s possible that your version is conflicting with other code in the same list. If you could share a bit more context, I’d be happy to take a closer look and help troubleshoot.

Regarding your last point, about navigation, do you happen to have a visual example? That would help clarify your intent, as I’m not entirely sure I understood it correctly.
Andrea Oh 60 Reputation points

2025-07-08T03:27:16.04+00:00
Web browser worked fine.

But SharePoint mobile app, I can't go back previous page(screen)

for example

SPO moblie access

click site

click hero webpart in Home

Menu is still home but only the body was changed to specific page
page URL in hero & page URL of Navigation bar were exactly same.
If I click previous button on mobile or SPO mobile app, then it goes to SPO app first page.

If I click the page in navigation bar, then menu name was changed "Home" to "specific page" and the screen also changed, too.

The JOSN links and Lookup columns in the list work the same way.

How can I move the sing page, if I click the links on mobile
Gabriel-N 2,995 Reputation points Microsoft External Staff Moderator

2025-07-08T10:24:16.4166667+00:00

Thank you very much for your detailed response and the valuable information you’ve provided. I truly appreciate the effort and clarity in your explanation. Please allow me a bit of time to thoroughly test everything on my end.
Gabriel-N 2,995 Reputation points Microsoft External Staff Moderator

2025-07-08T15:00:23.17+00:00
Hi Andrea Oh

I noticed that when you swipe back in the SharePoint app, it takes you to the homepage. This seems to be the default behavior, and unfortunately, it doesn’t look like we can change it.

However, I tried a small workaround that might help:

Go to the list you want and use the “Copy link” feature.

Click Edit on the site header.

In Site Navigation, add the copied link and rename it to match the list name.

Now, when you're on the site, after tapping the footer and the new page opens, you can tap the three-line icon next to "Home" and select the new link to go back to the list. If you want to return to the main site page, just swipe back from there.

I hope this will assist you effectively.
Andrea Oh 60 Reputation points

2025-07-09T04:14:13.4133333+00:00

SharePoint mobile app, three-line icon, next to "Home" is following navigation setting.

And only three-line icon menu can navigate to other pages stable.

This seems to be the default behavior, because it's a Single Page Application.
I knew, but I was asking if there were any other settings or methods.

Actually, If I use "open as browser" and delete SharePoint mobile app. There is no Issues.

Thank you for your efforts.

Share via

How to use link of JSON footer in SharePoint list form's on mobile

0 additional answers

Your answer