Written by

Andy Stobirski

Senior Developer at Greater Manchester Mental Health Services

Question Andy Stobirski · Nov 7, 2022

Displaying custom icons in Zen TablePane

#Caché #TrakCare #ZEN

Can anyone explain how to display custom icons in a TablePane?

Andy

Discussion (3)0

Add reply

Comments

Cristiano Silva · Nov 7, 2022

Hi Andy,

If you are using the tableNagator you can extends and override the XData Contents with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigator

If you are using the tableNagatorBar you can extends and override the javascript method renderButtons with icons, in the place of default buttons. Class to extends %ZEN.Component.tableNavigatorBar

0 0

Andy Stobirski Nov 8, 2022 to Cristiano Silva

Hi Christiano

Thanks for your reply - I'm not sure how to go about doing that. So, if I had a .PNG how would I display it on a zen page?

Andy

0 0

Cristiano Silva Nov 8, 2022 to Andy Stobirski

Hi Andy.

Follows a very simple example:

Navigation Customized:

/// br.cjs.zen.TableNavigatorClass br.cjs.zen.TableNavigator Extends%ZEN.Component.tableNavigator
{

/// Este é o namespace XML para este componente.Parameter NAMESPACE = "br.cjs.zen";/// Contents of this composite component:/// This is a set of paging buttons as well as text controls/// to show the current page number.
XData Contents
{
<composite xmlns="http://www.intersystems.com/zen">
    <hgroup labelPosition="left" cellAlign="left">
        <!-- originally was a series of buttons -->
        <image id="btnFirst" onclick="zenThis.composite.gotoPage('first');" src="navigation/First.png"/>
        <image id="btnPrev"  onclick="zenThis.composite.gotoPage('prev');"  src="navigation/Previus.png"/>
        <image id="btnNext"  onclick="zenThis.composite.gotoPage('next');"  src="navigation/Next.png"/>
        <image id="btnLast"  onclick="zenThis.composite.gotoPage('last');"  src="navigation/Last.png"/>
        <!-- End -->
        <spacer width="20"/>
        <text id="pageNo" size="2" labelClass="tn-pageLabel" onchange="zenThis.composite.gotoPage(zenThis.getValue());" />
        <text id="pageCount" size="4" labelClass="tn-pageLabel" readOnly="true" />
        <spacer width="*"/>
    </hgroup>
</composite>
}

}

Sample usage:

0 0