Forums

So instead of having to click an entry and go to a separate page to view it (which obviously loses any selections you've made and means you have to wait for it to load) you can just have the details pop up in a little window.
​
___UPDATE___
​
* Removed the unnecessary AJAX Features
* Note: You may want to use the old version for when you don't read all the fields in the initial data read, or for when you want to load data from a different table and display
​
1. In the Table view, which I will assume is called "table_view"
Columns list -> popup:Details
Columns views -> popup:{view:entry_details_popup_button}
IMPORTANT -> Columns classes -> popup: one wide (or really just anything other than 'collapsing')
​
2. New view, "Details List", I will assume it's called "details_list"
Add in all the fields and field views for the fields you want to show in the details list
Data Provider -> {var:table_view.row}
​
3. New view, "Task Button", called "entry_details_popup_button"
Event -> leave blank
Content -> <i class = "icon eye"></i>
URL and/or URL parameters -> leave blank
Dynamic AJAX features? -> No (unchecked)
Dynamic result -> leave blank
Open a popup? -> Yes (checked). Obviously.
Popup Content -> {view: details_list}
​
4. Nothing, no need for a separate event
​
5. PROFIT!
​
___OLD VERSION___
​
This version is for when you don't read all the fields in your initial data_read action, or when you need to get additional data to display.
Please note that I'm pretty sure I have the AJAX dynamic result settings wrong, and that this doesn't work very well (or at all) when you have multiple AJAX popup columns.
​
1. In the Table view, which I will assume is called "table_view"
Columns list -> popup:Details
Columns views -> popup:{view:entry_details_popup_button}
IMPORTANT -> Columns classes -> popup: one wide (or really just anything other than 'collapsing')
​
3. Read data
All the settings you would usually use to read a single entry.
e.g. Where conditions -> id:{data:id}
Select type -> First matching record
I assume it will be called "read_single_entry" and the model will be called "model" but call it what you need. I also assume there's an "id" field that identifies the record you want to retrieve
​
2. New view, "Details List", I will assume it's called "details_list"
Add in all the fields and field views for the fields you want to show in the details list
​
3. New view, "Task Button", called "entry_details_popup_button"
Event -> view_popup_details
Content -> <i class = "icon eye"></i>
URL and/or URL parameters -> id={var:table_view.row.model.id}&tvout=view
Dynamic AJAX features? -> Yes (checked)
Dynamic result -> html:.popup (it's .popup with the full stop in front, so make sure you didn't miss that)
Open a popup? -> Yes (checked). Obviously.
Popup Content -> {view: details_list}
​
4. New event, "view_popup_details"
{fn:read_single_entry} {view:details_list}
​
​
5. Profit!

My popup is showing underneath the previous row. How do I make it actually pop UP rather than pop UNDER?

Got it. Thanks.

I do something similar (no ajax) using the tooltipstered feature.
I create a HTML view with the following content:
​
<i data-hint="your content here" class="icon green circle info inverted tooltipstered"></i>
​
I put the view wherever I need it and the popup pops up hovering the icon.
​
maxx

Unfortunately the popup is not working as expected on Edge if the width of the content is wider than its default width of 83px.
The table created by the Details list overflows the popup width.
It was reported by someone in some forum connected to semantic-ui: https://github.com/Semantic-Org/Semantic-UI-React/issues/2508

They'll be moving the edge renderer to chromium soon that'll sort itself

Since my customer doesn't like to wait I used tooltipstered. ;-)
Instead of a task button view I use an html view (entry_details_popup_button)

<i class="icon eye myclass tooltipstered" data-item="{var:table_view.row.model.id}"></i>

In a javascript view I put the following code:

  jQuery('i.myclass.tooltipstered').tooltipster({
      content: 'Loading...',
      // 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
      functionBefore: function(instance, helper) {
   
   var $origin = $(helper.origin);
   
   // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
   if ($origin.data('loaded') !== true) {

     var item = $origin.data('item');
     var pars = {
       filter1:item,
       tvout: 'view'
     };  
     jQuery.get('{url:view_popup_details}', , function(data) {

   // call the 'content' method to update the content of our tooltip with the returned data.
   // note: this content update will trigger an update animation (see the updateAnimation option)
   instance.content(data);

   // to remember that the data has been loaded
   $origin.data('loaded', true);
       });
   }
      },
      contentAsHTML: true,
      contentCloning: false,
      trigger: 'click'
  });

[http://iamceege.github.io/tooltipster/#ajax]
​
It works in Edge too. It is a little bit dark but the tooltipster can be customised.
​
bye
maxx