How to embed Reltio Cloud components into other applications?

Fernando

Updated August 18, 2021 13:23

Question

Answer

To embed Reltio Cloud components on your HTML page you need to do the following:

Add a <script> tag with a link on Reltio /inline.js script.
<script type="text/javascript" src="></script>

Write your own script inside UI.onReady(function() {...}).

<script type="text/javascript">

   UI.onReady(function() {

      //Some code here...

   });

</script>

Check if user is already logged in and log in user if not.

if(UI.isLoggedIn())

{

   //Some code here...

}

else

{

   //Get username and password from user 

   var username =...,

       password =...,

       isRemember = true; //or false if you don't want to store tokens in local storage

   UI.login(username, password, tenant, isRemember, function() {

     //Some code here...

   }, this);

}

Add <div> elements to your HTML page where you want to render Reltio views.

<!DOCTYPE html>

<html xmlns=" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="></script>

    <script type="text/javascript">

       UI.onReady(function() {

          if(UI.isLoggedIn())

          {

             //Some code here...

          }

          else

          {

             //You need to get username and password from user somehow

             var username =...,

                 password =...,

                 isRemember = true; //or false if you don't want to store tokens in local storage

             UI.login(username, password, tenant, isRemember, function() {

                //Some code here...

             }, this);

          }

       });

    </script>

</head>

<body>

    <div id="treeView" style="position:absolute;margin-top:30px;left:450px;width:400px;height:400px;border: 1px solid black"></div>

https://tst-01.reltio.com/embed/inline.js

    <div id="searchPanel" style="position:absolute;top: 500px;width:1500px;height:400px;border: 1px solid black"></div>

</body>

Render Reltio view in your <div>.

var treeView = UI.createView(

        "treeView", //div id where you want to see this view

        "com.reltio.plugins.entity.org.amv2.LegalTreeView", //view id from Reltio UI configuration (optional)

        {

            caption: "Legal Entities Hierarchy" //JSON with properties you want to overwrite in view UI configuration. Can contain whole JSON for view UI configuration (optional)

        },

        true, //Should we use separate session for this view? Session handle current entity URIO for example

        function(eventType, event) //Listeners

        {

            if (eventType === "selectionChanged")

            {

                console.log("Tree item selected", event.getData());

            }

        });

if(treeView != null)

{

    treeView.setEntity("entities/03j9Ci2");

}

Render search view in your <div>

var searchPanel = UI.createSearchPerspective(

    "searchPanel", //div id where you want to see this view

    { //JSON with properties you want to overwrite in view UI configuration. Can contain whole JSON for view UI configuration (optional)

       importButton: { //Import button (on search result item) configuration (optional)

         label: "Test action",

         action: function(entity) {

               console.log("Test action", entity);

            }

       }

   }, 

   null, //JSON with search state (optional)

   true, //Should we use separate session for this view 

   function(eventType, event)

   { //Listener on search view

      if (eventType === "selectionChanged")

      {

          console.log("Entity selected", event.getData().entity);

      }

      else if (eventType === "changeSearchQuery")

      {

          console.log("Search query changed", event.getData().query);

      }

  });


var searchState =...;

if (searchPanel)

{

    searchPanel.updateSearchState(searchState);

}

Available facet options

Dashboard

com.reltio.plugins.dashboard.ProfileStatsView"
"com.reltio.plugins.activities.ActivitiesView"
"com.reltio.plugins.dashboard.BubbleChartView"
"com.reltio.plugins.dashboard.EntitiesByRoleView"
"com.reltio.plugins.dashboard.EntitiesByTagView"
"com.reltio.plugins.dashboard.EntitiesByTypeView"
"com.reltio.plugins.dashboard.FacetAttributeChartView"
"com.reltio.plugins.dashboard.FacetChartView"
"com.reltio.plugins.dashboard.FilteredEntitiesView"
"com.reltio.plugins.dashboard.FilteredSavedSearchesView"
"com.reltio.plugins.dashboard.InteractionsView"
"com.reltio.plugins.dashboard.MapView"
"com.reltio.plugins.inbox.NotificationInboxView"
"com.reltio.plugins.workflow.inbox.WorkflowInbox"
com.reltio.plugins.dashboard.BarChartView

Profile

com.reltio.plugins.entity.CounterView: Old small view, shows counts of graphs, groups and relationships for current entity
com.reltio.plugins.entity.EntityMapView": New view, shows Google map with address pin
com.reltio.plugins.entity.EntityView: View with attributes
com.reltio.plugins.activities.ProfileActivitiesView: View with activity log for current entity
com.reltio.plugins.analytics.AnalyticsView: Fake analytics view with only background image (for demo purposes)
com.reltio.plugins.entity.ProfileBand: Old profile band (entity header)
com.reltio.plugins.entity.NewProfileBand: New profile band (entity header) fo read/edit mode
com.reltio.plugins.entity.RelationsView: Relation facet view
com.reltio.plugins.entity.RatingListView: Relation facet view with voting (deprecated)
com.reltio.plugins.entity.OtherListView: Relation facet view for all relation types non-listed in other relation facet views
com.reltio.plugins.entity.ShortestPathView: Shows shortest path from current entity to selected one (deprecated)
com.reltio.plugins.entity.TableView": Shows data in small grid (deprecated)
com.reltio.plugins.entity.TreeView: Hierarchy tree facet
com.reltio.plugins.entity.categories.CategoriesPathView: Categories
com.reltio.plugins.entity.PotentialMatchesView

Potential matches facet

Right side panel

com.reltio.plugins.entity.side.HistoryView: History of changes for current entity
com.reltio.plugins.entity.side.NetworkView: Network graph of relations of current entity
com.reltio.plugins.entity.side.ResearchView: Search view: Google CSE, Yahoo, Reltio
com.reltio.plugins.entity.side.WorkflowsView: Workflows of current entity
com.reltio.plugins.entity.collaboration.DiscussionsView: Comments on current entity

Graph

com.reltio.plugins.graph.GraphView: Graph view
com.reltio.plugins.graph.side.GraphSideViews: Collection of side view for graph screen
com.reltio.plugins.graph.side.AllConView: List of all connections for selected entity on graph
com.reltio.plugins.graph.side.EntityTypeFiltersView: Filters
com.reltio.plugins.graph.side.GroupsView: List of all groups for selected entity
com.reltio.plugins.graph.side.RelationFiltersView: Filters
com.reltio.plugins.graph.side.SelectedEntity: Description of selected entity on graph
Category Profile

com.reltio.plugins.entity.categories.CategoryProfileView: Category profile view with attributes

HCO hierarchy addresses report

com.reltio.plugins.entity.addressreport.AddressReportView: HCO hierarchy addresses report view
com.reltio.plugins.entity.addressreport.StateMap: Map for HCO hierarchy addresses report

Side by side comparison

com.reltio.plugins.sidebyside.SideBySideView
com.reltio.plugins.entity.RelationListView
com.reltio.plugins.entity.FindEntitiesViews

Potential matches

com.reltio.plugins.sameas.SameAsView: View with 1 to 4 columns where user can compare current entity and potential matches

com.reltio.plugins.sameas.MorePotentialMatchesView: Side view with list of available potential matches (or not matches)

com.reltio.plugins.sameas.FindPotentialMatchesView: "Find" side view-to search entities in tenant

Interactions

com.reltio.plugins.interactions.InteractionsView: Interactions view

Lifenet

com.reltio.plugins.lifenet.LifenetView
com.reltio.plugins.lifenet.side.LifenetSideViews
com.reltio.plugins.lifenet.side.AllConView
com.reltio.plugins.lifenet.side.SelectedEntity

Relationships

"com.reltio.plugins.relationships.RelationshipsView"
"com.reltio.plugins.relationships.RelationshipsLegendView"

Search

com.reltio.plugins.search.dev.SearchView

Sources

com.reltio.plugins.sources.SourcesView: View with all attributes of entity
com.reltio.plugins.sources.LegendView: View with crosswalk tree and list of all entity's crosswalks

Tags

com.reltio.plugins.tags.TagProfileBand
com.reltio.plugins.tags.TagEntitiesView
com.reltio.plugins.tags.TagIntersectionsView
com.reltio.plugins.tags.TagRelationsView
com.reltio.plugins.tags.TagStatisticsView

Settings

com.reltio.plugins.settings.user.UserManagemeewcodeph>
com.reltio.plugins.settings.configuration.ConfigurationView
com.reltio.plugins.settings.exports.ExportViewcodeph>

References

https://docs.reltio.com/datadrivenapps/acct360dashboard.html

Question

Answer

Available facet options

Potential matches facet

References

Articles in this section