How to Link a Directory with a Floorplan

Get Help
1

First you’ll need to create a custom icon in your Directory screen LFD component with several specific changes:

  • You'll need to add one or two data attributes to the component code HTML. Add something like data-location="{{originalData.Location}}" assuming Location in the second part is the name of the column in your data source with the person's specific room.
  • Additionally if you have multiple Offices or Floorplan screens, you should also an an attribute for the Office (eg. data-office="{{originalData.Office}}").

You’ll then need to write screen Javascript for the Directory similar to this with several changes:

  • The code for this is below. You may need to change the code, str1, and str2 variable.
  • You'll need to read the attributes you added in the previous section and adjust the code and str variable to the location/room, and office/screen.
  • The str1 variable assumes that your screen names are "Floorplan - " + the Office Name. If your screens are named in this way you won't need to adjust this code.
$(document).on('click', '.customclass' ,function(){
  var code = $(this).attr('data-location');
  var str1 = "Floorplan - ";
  var str2 = $(this).attr('data-office');
  var screenName = str1.concat(str2);

   Fliplet.Navigate.screen(screenName, {
   	query: '?officeMarker=' + code,
        transition: 'fade'
   }); 
});

Lastly, in each of your floorplan screens, you’ll need to copy the code below into the screen JS. The first part of the code will read the query parameters you passed in the first step to open the correct marker, as long as the marker name exactly matches the data that was passed. The second part will allow you to click on the marker name in the upper right to link back to the Directory screen. This will require several changes:

  • Change the dirScreen variable to the name of the Directory screen.
  • Change the locationColumn to the column name of the Location/Room in your Directory/People data source
var query = Fliplet.Navigate.query;
var dirScreen = 'Directory';
var locationColumn = 'Location';

Fliplet.Hooks.on('flInteractiveGraphicsBeforeRender', function () {
  return { markerName: query.officeMarker };// This should call the "query" value passed from the office location lookup screen 
});

Fliplet.Hooks.on('flInteractiveGraphicsLabelClick',
	function onLabelClick(data) {
			// Open by column and value
			return Fliplet.Navigate.screen(dirScreen, {
				query:
					'?dynamicListOpenColumn=' + locationColumn +
					'&dynamicListOpenValue=' +
					encodeURIComponent(data.selectedMarker.name)
			}).catch(function (error) {
				console.log(error);
			});
	}
);