Using Calendar Control

Calendar control can have various applications, from a GitHub issue tracker to a personal expense manager. Today we are going to discuss a potential application. An investor might need to keep track of upcoming IPO offerings of various companies. SO calendar control can come to rescue.

For this use case we are going to use Calendar control along with the MongoDB database.

In brief our solution involves

  1. Setting up a MongoDB database and create a connector for it
  2. Populate IPO’s in Calendar control using A custom query.
  3. Create 2 Custom actions for IPO(s) i.e Add to favourites and Non interested
  4. Make it possible to add new IPO(s)

Setting Up the MongoDB

The foremost task is to set up the MongoDB connector. For help regarding MongoDB connector, refer to this article. We will be storing various IPO’s in following format

{
    "COMPANY NAME": insert_details_here,
    "SECURITY TYPE": insert_details_here,
    "ISSUE PRICE": insert_details_here,
    "Symbol": insert_details_here,
    "ISSUE START DATE": insert_details_here,
    "ISSUE END DATE": insert_details_here,
    "PRICE RANGE": insert_details_here,
    "DATE OF LISTING": insert_details_here
}

Insert some IPOs in your MongoDb collection, let it be named companies and we’re done with this step.

Configuring Calendar control

Drag and drop a Calendar Control. Now as a first step , we need to populate IPO’s from Database.

  • Select your MongoDb connector and click on +ADD QUERY

  • Name this query as Get_IPO and from Collections dropdown select companies.

  • Test and save this query.
  • Select Calendar Control > Data > Connector , select MongoDB connector >Get_IPO query. Select Columns to bind and finally Save it.

  • Now go to Calendar control > Properties and set the values for required fields. Also Turn open Detailed view OnCLick On.

Creating Calendar control actions

For each IPO, we will be making 4 options available

  • Add to favourite
  • Not interested
  • Edit IPO
  • Delete IPO

Adding actions

  • Select Calendar control > properties > actions and make 4 actions visible. Configure these 4 buttons for the above mentioned options.

  • Now on preview if you click on an IPO, you will see that these four options are available in detailed view. Now we add functionality for all these actions.

Creating IPO popups

Now we’ll create 2 trays. One for Editing IPO and one for Creating new IPO.

  • From the left menu, select Screens > +Add > Popup. Name it Create IPO
  • Place a container and make it similar to below screenshot

Text Input controls:- Company Name, Security type, issue price, Price range, Status.

Date Input controls:- Start date, End date, Date of Listing

Buttons:- Add task and cancel.

  • Go back to Screens > Create IPO > options (…) > copy screen

  • Name this screen as Edit IPO.

  • For each input field in the Edit IPO popup, we will be mapping present values of selected IPO. So for all fields, the process is the same. Let’s see how it’s done for the Status field.
  • Select Company name input control > Data > Data. Here provide the value of selected IPO’s status as follows

{{calendarcontrol.result.rows.Status}}

  • Do this for all other fields as well.

Now we are done with everything, and all we need to do is provide logic for all the interactions.

Creating connector and queries

In our case we need to create a connector for the MongoDB collection. Using that we will be creating Create, Update and Delete queries.

CREATE Query

  • Select MongoDB connector > +Add Query.

  • Name this query as Create_IPO. From collections select companies and for action select insertOne.

  • In Insert body, put the following object definition

      {
      "Company_name": "{{company}}",
      "Security_type": "{{security}}",
      "Issue_price": "{{issueprice}}",
      "Status": "---",
      "Issue_start_date": "{{startdate}}",
      "Issue_end_date": "{{enddate}}",
      "Price_range": "{{pricerange}}",
      "Date_of_listing": "{{dateofListing}}"
      }
    

From the right side, initialise the values of all the variables that are enclosed in “{{ }}”

Test and save this query.

UPDATE Query

  • Add another query and name it Update_IPO. From collections select companies and for action select updateOne.
  • In Filter, provide ID of selected IPO

{"_id":"{{id}}"}

  • In Update body, put the following object definition

    {
"Company_name": "{{company}}",
"Security_type": "{{security}}",
"Issue_price": "{{issueprice}}",
"Status": "{{status}}",
"Issue_start_date": "{{startdate}}",
"Issue_end_date": "{{enddate}}",
"Price_range": "{{pricerange}}",
"Date_of_listing": "{{dateofListing}}"
}
  • From the right side, initialise the values of all the variables that are enclosed in “{{ }}”
  • Test and save this query.

DELETE Query

  • Add another query and name it Delete_IPO. From collections select companies and for action select deleteOne.
  • In Filter, provide ID of selected IPO

{"_id":"{{id}}"}

  • From the right side, initialise the values of all the variables that are enclosed in “{{ }}”
  • Test and save this query.

Final steps

Now we have everything in place, we just need to connect the dots. We will be creating actionflows for following

  • Create new schedule button

  • Updating IPO status buttons (adding to favourite/ not interested)

  • Edit button

  • Delete button

Create new IPO

  • Go to Calendar control > actions > new_schedule.
  • Click on + > On-screen actions > navigate and for navigate to field select Create IPO. Keep transition as Slide to top.
  • Select Create IPO popup > Create button > action.
  • Click + > server side actions > Custom database connectors > MongoDB connector.
  • Select Create_IPO , click next and assign values to all fields to the query variables.

Eg:- for Company name field select companyname. Do similarly for other fields.

  • Click Continue > Finish.
  • Add a popup to inform users about successful creation of an IPO, click + > On-Screen actions > popup.
  • Add a Reset control action for Calendar control.
  • At last add a Navigate action for the main screen. In transition, select Slide to bottom.
  • In the Create IPO popup, select Cancel button > action and add a navigate action for the main screen. In transition, select Slide to bottom.

Adding to favourite / not interested button

  • Navigate to Calendar control > actions > action1_click. Here we will be creating actionflow for Add to favourite. For Not interested, Select action2_click.
  • Click + > server side actions > Custom database connectors > MongoDB connector.
  • Select Update_IPO , click next and assign values to all fields except the Status field.

Eg:- for Company name field select calendarcontrol.result.rows.Company_name

  • For status field write Favourite. Click Continue > Finish.
  • In a similar way, set up the Not interested button’s action flow. Use action2_click and in Status, type Not interested.
  • Add a popup to inform users about successful status updation of an IPO, click + > On-Screen actions > popup.
  • Add a control reset action at the end and reset the calendar control to reflect the changes. This status change can be seen in the detailed view on clicking the IPO.

Edit button

This button will also use the Update_IPO query, but here, we will be mapping values from the Edit IPO popup we created earlier.

  • Select Calendar control > actions > action4_click.
  • Click + > On-Screen actions > Navigate. In Navigate to field select Edit IPO. In transition select Slide to Top.

  • Now select the Edit IPO popup. Select the Update button and go to actions.
  • Click + > server side actions > Custom database connectors > MongoDB connector.
  • Select Update_IPO , click next and assign values to all fields to the query variables.

Eg:- for Company name field select companyname1

Note : When you search for a particular control, you will see two instances of it, for example company name and companyname1. This is due to the fact that the EDIT IPO popup is a copy of the CREATE IPO popup. So be careful while selecting controls.

  • Click Continue > Finish.
  • Add a popup to inform users about successful updation of an IPO, click + > On-Screen actions > popup.
  • Add a Reset control action for Calendar control.
  • At last add a Navigate action for the main screen. In transition, select Slide to bottom.
  • In the Edit IPO popup, select Cancel button > action and add a navigate action for the main screen. In transition, select Slide to bottom.

Delete button

Final step is to create an actionflow for the delete button.

  • Select Calendar control > actions > action3_click.
  • Click + > server side actions > Custom database connectors > MongoDB connector.
  • Select Delete_IPO , click next and assign value of selected IPO’s ID to variable ID

calendarcontrol.result.rows._id

  • Add a popup to inform users about successful deletion of an IPO, click + > On-Screen actions > popup .
  • Add a Reset control action for Calendar control.

With this our IPO manager app is ready to use. Now you can manage all your IPO investment plans with great ease.

Preview

Calendar control

Detailed view of IPO

Edit view for IPO