# IApps-Navigation

The IApps-Navigation feature provides a method for users to circle back to the IndustryApps platform if they have accessed a third-party application which redirects via a new tab. Please utilise this add-on feature if your applications configuration fits this criteria.

Users utilise many applications on IndustryApps for different use cases, and as such providing a smooth flow transition is important for an improved user experience.

### How do I add it?

The feature should be added as code snippets in your client-side application. The add-on will redirect the user back when the IApps back button on-click event is triggered.

Copy the line of code below into your `index.html` file.

{% hint style="info" %}
In case of an Angular application a similar framework, you may include the `.js` and `.css` files in the `angular.json` script and style sections.
{% endhint %}

```html
<div id="iapps-nav-logo"></div>
```

Include the `iapps-nav.js` functions file illustrated below.

{% code title="iapps-nav.js" overflow="wrap" lineNumbers="true" %}

```javascript
document.getElementById("iapps-nav-logo").onclick = function() {onClickIappsLogo()};

var isDragged = false;
function onClickIappsLogo() {
    if (isDragged) {
        return;
    }
    let params = window.location.hash.split('launch=')
    let url = params.length > 1 ? params[1] : '';
    window.location.href = decodeURIComponent(url);
}

dragElement(document.getElementById("iapps-nav-logo"));

function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById("iapps-nav-logo")) {
        // if present, the header is where you move the DIV from:
        document.getElementById("iapps-nav-logo").onmousedown = dragMouseDown;
    } else {
        // otherwise, move the DIV from anywhere inside the DIV:
        elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        isDragged = true;
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
        setTimeout(dragEnd, 500);
    }

    function dragEnd() {
        isDragged = false;
    }
}

```

{% endcode %}

Include the `iapps-nav.css` file illustrated below.

{% code title="iapps-nav.css" overflow="wrap" lineNumbers="true" %}

```css
#iapps-nav-logo {
    background: url("assets/iapps-nav.png") ;
    position: fixed;
    height: 60px;
    width: 60px;
    background-size: contain;
    cursor: pointer;
    top: 75px;
    left: 10px;
    z-index: 25;
}
```

{% endcode %}

{% hint style="info" %}
In case of an Angular application, include the js and css files in the angular.json script and style sections.
{% endhint %}

Copy the `iapps-nav.png` image to your assets folder, available below.

{% file src="/files/tQsQUUvnflfeLXEQ3xSH" %}

Third-party Applications URL should contain a queryParam - launch. The URL assigned to launch the param will be used to redirect while clicking on the IApps back button.

Example:

{% code overflow="wrap" %}

```html
https://www.thirdpartyapp.com?launch=https://democustomer.uat.industryapps.net
```

{% endcode %}

**The Add-on feature repository is available below.**

{% embed url="<https://github.com/IndustryApps/iapps-navigation-addon-feature>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.industryapps.net/add-on-features/iapps-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.