Web App Integration

When you choose to integrate your standalone apps into the platform, you can access the ltple object globally to interact with the web app interface.

This interface allows you to, among other things, incorporate the default media library into your app flow or perform custom actions such as “Save”.

Web Resources

To integrate your Web App, start by adding the required JS, CSS, and font web resources through the Admin dashboard.

You can choose to use remote URLs for your JS or CSS dependencies, allowing you to host scripts externally.

Learn more about integrating Web Resources >>

App Template

Once you’ve added the necessary web resources, create a new Web App template and include all required dependencies from element libraries.

Your Web App will then be available as a template for use.

Learn more about adding Default Templates >>

Media Library

The Web App interface allows you to seamlessly integrate the default media library into your app flow.

Use a single trigger to open the library and an event listener to retrieve the URL of the selected item by simply including the following code snippets anywhere in your app script:

To open the media library in your app:

ltple.trigger('open-media-library',{
            
        target 	: 'input_12345', // set your input id
        type	: 'image',
        args	: {},
});

To retrieve the url of the selected item:

ltple.addEventListener('media-item-selected',function(e){
        
    if(    typeof e.detail        == 'object' 
        && typeof e.detail.target == 'string' 
        && typeof e.detail.source == 'string' 
    ){
        
        var inputId = e.detail.target;
            
        var source = e.detail.source; // url of the selected item
           
        // do something
    }
        
});

Template Variables

The Web App interface allows you to access the template variables defined in the template form settings:

ltple.get('form').forEach((item, index) => {

    // item.id
    // item.label
    // item.name
    // item.type
    // item.data
    // item.options
    // item.required
});