DisplayLogic of Panel is not working

[xkrdudrlf]

Issue

I've followed the example in SuiteCRM8 documentation for controlling displayLogic, but it seems to me that it currently does not work.
(https://docs.suitecrm.com/8.x/developer/extensions/frontend/logic/panel-logic/fe-extensions-dynamic-panels/)

I think that Panel component somehow does not get any information about display information:

// In 'panel.component.html'
<div [class.collapsed]="isCollapsed" class="card panel-card {{klass}}">

    <div *ngIf="showHeader" class="card-header d-flex justify-content-between align-items-center">

        <div class="flex-grow-1 align-items-center d-flex">

            <div class="d-flex align-items-center">
                <scrm-close-button *ngIf="isClosable()" [config]="getCloseButton()"></scrm-close-button>
                <scrm-minimise-button *ngIf="isCollapsible()"
                                      [config]="minimiseButton"
                                      [status]="minimiseStatus">
                </scrm-minimise-button>
                <ng-content select="[panel-icon-area]"></ng-content>
            </div>

            <div *ngIf="title" class="pl-1 panel-title">{{title}}</div>
            <div *ngIf="titleKey" class="pl-1 panel-title">
                <scrm-label [labelKey]="titleKey"></scrm-label>
            </div>
        </div>


        <div class="panel-buttons float-right">
            <ng-content select="[panel-header-button]"></ng-content>
        </div>
    </div>

    <div class="card-body p-{{bodyPadding}}" [ngbCollapse]="isCollapsed">
        <ng-content select="[panel-body]"></ng-content>
    </div>
</div>

As we can observe in the above code snippet, the panel.component.html does not have any variable to control the display of the Panel component.

The displayLogic we set in backend def file somehow get passed to PanelLogicManager component and the PanelLogicManager component determines 'displayState' of a panel using the user-defined displayLogic.

However, the panel.displayState is currently never passed to actual Panel component (panel of panel.displayState is a panel as a data structure).

Possible Fix

I think Panel component needs to have 'displayState' observable like 'isCollapsed' observable in Panel component so that the Panel component can detect and keep 'displayState' up-to-date. Then, Panel component needs to use the 'displayState' in panel.component.html to determine the display status of Panel component.

Steps to Reproduce the Issue

According to an example in the documentation (https://docs.suitecrm.com/8.x/developer/extensions/frontend/logic/panel-logic/fe-extensions-dynamic-panels/), One can do

1. create a panel in def file
2. try setting the displayLogic for the panel

Context

No response

Version

8.7

What browser are you currently using?

Chrome

Browser Version

No response

Environment Information

MySQL, PHP8.1

Operating System and Version

Ubuntu23.10

[johnM2401]

Hey!

Thank you for getting in touch!

I've given the snippet in the docs site a try locally, and it appears to be working well:

In the above gif, I have displayLogic set for the LBL_PANEL_ADVANCED Panel on a custom Accounts Detailviewdefs.
The LBL_PANEL_ADVANCED panel should hide when setting the name to "Example2"

Would it be possible to provide a snippet of the code you've used for this?
We may be able to figure out if anything's awry
(or if I've in fact misunderstood your issue, please let me know!)

Thanks!

[xkrdudrlf]

Yeah, I've just checked and found out that a panel display logic works when 'useTabs' configuration is set 'true'
However, when I set 'useTabs' as 'false', the display logic of panel does not work anymore.
Is this intended behavior?

Thank you :)

[johnM2401]

Hey!

Ahh, Thank you, I can replicate when setting "useTabs" to "false"

I believe this is indeed a bug, thank you for reporting this (and for helping me replicate!).

I'll mark this with the appropriate labels.

Thank you again!