You probably haven’t updated the widget yet. I added this part later than I posted the original widget.
Explanation for the two different approaches of Holger’s and mine solution:
Holger is opening the popup (containg the log details) by a command action and is submitting log details for the log entry you clicked on by a actionModalConfig: parameter. This works perfectly if you have the log list on a page and the log details in a popup widget.
The solution I posted is aimed at a different structure. This works for an oh-card or oh-cell where the log list is shown on an expanded card and the log details are shown on a popup widget. In this structure (popup on top of an expanded card) if you close the popup the expanded card will be closed, too and a refresh of the underlying page will happen. That’s why it is important to open the popup by popupOpen: =.open-popup-logdetails because only then you are able to close just the popup by popupClose: =.open-popup-logdetails
I’m having trouble seeing how this all fits into the page itself… Would you mind sharing the complete yaml of your page?
Thanks!
The complete yaml of my page will definitely be too complex 
At least I have removed to other cells. But the section for our logging solution is just one out of several functions the cell provides to me…
Here we go:
config:
hideNavbar: true
hideSidebarIcon: false
icon: f7:house
label: Home
layoutType: responsive
order: "1"
showFullscreenIcon: false
sidebar: true
style:
--f7-block-padding-horizontal: 8px
--f7-button-text-transform: none
--f7-list-item-footer-font-size: 16px
--f7-list-item-header-font-size: 18px
--f7-list-item-title-font-size: 24px
--f7-navbar-height: 0px
stylesheet: |
.block:first-child {
margin-top: 6px;
margin-bottom: 0px;
}
.block-title {
margin-bottom: 0px;
}
.-expanded-card-block {
position: absolute;
top: 0px;
left: 0px;
overflow-x: hidden;
margin: 0px;
width: 100%;
z-index: -1;
}
.-expanded-card-title {
font-size: 24px;
font-weight: 500;
color: black;
text-align: center;
}
.-expanded-card-actionbutton {
display: flex;
align-items: start;
flex-direction: column;
justify-content: center;
--f7-button-hover-bg-color: rgba(150,150,150,0.5);
--f7-button-bg-color: white;
--f7-button-pressed-bg-color: rgba(150,150,150,1.0);
--f7-button-text-transform: none;
border-radius: var(--f7-card-expandable-border-radius);
box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
color: black;
font-size: 20px;
font-weight: 300;
height: 70px;
margin-top: 20px;
padding-left: 20px;
white-space: normal;
width: 250px;
}
.-list {
--f7-list-group-title-height: 38px;
--f7-list-group-title-bg-color: rgb(242,242,247);
--f7-list-group-title-font-size: 12px;
--f7-list-group-title-text-color: gray;
--f7-list-item-title-font-size: 16px !important;
--f7-list-item-title-line-height: 18px;
--f7-list-item-subtitle-font-size: 12px !important;
--f7-list-item-subtitle-font-weight: 100 !important;
--f7-list-item-subtitle-line-height: 12px;
--f7-list-media-item-title-font-weight: 400 !important;
--f7-list-inset-border-radius: 8px !important;
--f7-toggle-active-color: rgb(58,200,96);
}
.-list-title {
font-size: 12px;
color: gray;
text-align: left;
margin: 15px 0px 5px 17px;
}
.-list-titleblock {
padding: 0;
display: flex;
flex-direction: row;
align-items: end;
font-size: 12px;
color: gray;
text-align: left;
margin: 15px 0px 5px 17px;
}
.-list-item-title {
font-size: 14px;
margin-left: 7px;
white-space: nowrap;
}
.header-icon {
font-size: 35px !important;
width: 40px !important;
height: 40px !important;
}
.button-header {
line-height: 40px !important;
padding: 0px !important;
font-weight: normal;
}
.cell-expanded-header {
margin: 20px !important;
padding: 0px;
}
.card-opening .cell-contents, .card-opened .cell-contents {
background-color: rgb(242,242,247);
}
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config:
cols:
"719": 2
default: 5
slots:
default:
- component: oh-cell
config:
color: black
expandable: true
header: System
icon: f7:gear_alt
on: true
stylesheet: |
.item-header {
--f7-list-item-header-text-color: white;
--f7-list-item-header-font-size: 14px;
}
slots:
background:
- component: f7-block
config:
class: card-opened-fade-out
style:
background-color: gray
color: white
display: flex
height: 120px
justify-content: flex-end
margin: 0
padding-right: 16px
padding-top: 64px
slots:
default:
- component: f7-chip
config:
bgColor: red
style:
color: black
text: =@'vAlarmCount'
visible: =(@'vAlarmCount' != '0')
- component: f7-chip
config:
bgColor: yellow
style:
color: black
justify-content: end
margin-left: 2px
ustify-itmes: right
text: =@'gFaults'
visible: =(@'gFaults' != '0')
- component: f7-chip
config:
bgColor: green
style:
color: black
margin-left: 2px
text: =@'gInfo'
visible: =(@'gInfo' != '0')
- component: f7-chip
config:
bgColor: blue
style:
color: black
margin-left: 2px
text: =@'vLogCount'
visible: =(@'vLogCount' != '0')
default:
- component: widget:expanded-card-status
config: {}
Maybe you could try my adaptation ( Getting daily error overview - #36 by HolBaum5 ) of the page and the popup based on what Oliver2 did. The rules and entry in log4j2.xml are still needed, of course.
1 Like
I did that, but removed one (or two, I assume?) layer(s):
config:
label: Display Errors
sidebar: true
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-list
config:
bg-color: white
class: -list
inset: true
mediaList: true
noHairlinesBetween: false
slots:
default:
- component: oh-repeater
config:
for: rLog
fragment: true
in: =JSON.parse(@@'vLog')
sourceType: array
slots:
default:
- component: oh-list-item
config:
action: popup
actionModal: widget:Widget_Logdetails_Popup
actionModalConfig:
logDetails: =loop.rLog_source[loop.rLog_idx]
badge: =loop.rLog.level
badgeColor: =(loop.rLog.level == "WARN")?"yellow":"red"
subtitle: =loop.rLog.timestamp + ", " + loop.rLog.threadName
title: =loop.rLog.message
masonry: []
grid: []
canvas: []