An app served by Freshworks developer platform will have app lifecycle event listeners to which callbacks can be registered with. In this tutorial, we will explore app lifecycle events to use in favour of app's requirements.

On the other hand, apps might also require a configuration page. Users can configure settings related to the app before and after the app is installed. We will explore two ways how you can build those configuration pages.

What we'll learn

• Building configuration pages using iparams.json
• Consuming the installed information by the user during and beyond the app installation.
• Managing secure information to be kept private from the browser

What we'll need

1. A Freshdesk trial account on Chrome web browser
2. Freshworks CLI
3. A code editor
4. Basic knowledge of HTML, CSS, Javascript, CLI and Browser DevTools
5. The Sample Code (See Get Set Up)
6. Freshdesk developer documentation open as you follow along.

What we'll do

You will start by writing code for app lifecycle events for one of the app placeholders. Later we will build a configuration page for the same app both with a low-code way (ft. iparams.json ) and regular way (ft. iparams.json) in different git branches.

Prerequisite Knowledge

1. How users use Freshdesk.
2. Have walked through code of an Freshworks App
3. Have completed the quick start section of Freshdesk documentation
4. Have used an UI library before and understands Crayons UI components

Let's clone the starting point

git clone https://github.com/freshworks-developers/app-lifecycle-and-configs-freshdesk.git

Or you can also

[Download a Zip](https://github.com/freshworks-developers/app-lifecycle-and-configs-freshdesk/archive/start.zip)

Verify

1. Open the started code in code editor
2. Open shell and run > fdk run
3. You should notice the app is being served at localhost:10001
4. Login to Freshdesk trial account and pay attention to four placeholders after appending ?dev=true at every page.

After you open the source code, a bunch of HTML, CSS and JS files can be found. These files render your app in ticket_sidebar placeholder.

At this point the following are apparent in the app,

1. It contains text App logs. You will write code to observe app lifecycle events. When ever one occurs, the app displays the event that has occurred.
2. There's also text Installed Parameters. For now, just ignore it. We will discuss this later as we explore configuration pages.

HTML, CSS and JS files that you wrote will be rendered in an inline frame (iframe) provided by Freshdesk in supported placeholders.

• App life cycle events are all about callbacks that the app can register when the app is initialized, activated or deactivated.
• While configuration pages are separate from web pages those load inside of the iframe provided by Freshdesk. These are rendered inside Freshdesk's app management page.

Let's start by opening app.js in app/scripts. The existing code invokes renderApp(){..} which is not defined yet. Let's define it and understand what is happening.

Add following code in app.js

function renderApp() {
  app
    .initialized()
    .then(function onInit(_client) {
      window['client'] = _client;
      appLifeCycleEvent('Initialized');

      client.events.on('app.activated', () => {
        appLifeCycleEvent('Activated');
      });

      client.events.on('app.deactivated', () => {
        appLifeCycleEvent('Deactivated');
      });
    })
    .catch(console.error);
}

function appLifeCycleEvent(state) {
  return notes.insertAdjacentHTML('beforebegin', `<li>${state}</li>`);
}

1. Within renderApp(){..} we try to access 'app'. Platform attaches the app to the window of