Leveraging Custom Templates & Controls to Enhance your WebClient Applications Rob McBride Plex Track
FOR INFORMATION PURPOSES ONLY Terms of this presentation This presentation was based on current information and resource allocations as of April 2013 and is subject to change or withdrawal by CA at any time without notice. Notwithstanding anything in this presentation to the contrary, this presentation shall not serve to (i) affect the rights and/or obligations of CA or its licensees under any existing or future written license agreement or services agreement relating to any CA software product; or (ii) amend any product documentation or specifications for any CA software product. The development, release and timing of any features or functionality described in this presentation remain at CA s sole discretion. Notwithstanding anything in this presentation to the contrary, upon the general availability of any future CA product release referenced in this presentation, CA will make such release available (i) for sale to new licensees of such product; and (ii) to existing licensees of such product on a when and if-available basis as part of CA maintenance and support, and in the form of a regularly scheduled major product release. Such releases may be made available to current licensees of such product who are current subscribers to CA maintenance and support on a when and if-available basis. In the event of a conflict between the terms of this paragraph and any other information contained in this presentation, the terms of this paragraph shall govern. Certain information in this presentation may outline CA s general product direction. All information in this presentation is for your informational purposes only and may not be incorporated into any contract. CA assumes no responsibility for the accuracy or completeness of the information. To the extent permitted by applicable law, CA provides this presentation as is without warranty of any kind, including without limitation, any implied warranties or merchantability, fitness for a particular purpose, or non-infringement. In no event will CA be liable for any loss or damage, direct or indirect, from the use of this document, including, without limitation, lost profits, lost investment, business interruption, goodwill, or lost data, even if CA is expressly advised in advance of the possibility of such damages. CA confidential and proprietary. No unauthorized copying or distribution permitted.
Abstract Rob McBride United Heritage Insurance Manager, Life Software Development This session will demonstrate how to use custom templates and controls to completely overhaul the look and feel of your WebClient application. With a basis in CA Plex, a little HTML and JavaScript know-how, and a lot of CSS, the sky s the limit as to what you can accomplish with WebClient. 3 Copyright 2015 CA. All rights reserved.
Agenda Intro 10:00-10:05 Speaker Bio Why Customize? Application Walkthrough 10:05-10:15 Customization In WebClient 10:15-10:35 Brief Overview of WebClient Custom Templates Custom Controls Leveraging CSS Next Steps 10:35-10:40 Questions 10:40-10:45
Intro (10:00-10:05)
Speaker Bio B.S. Mathematics Cal State San Marcos 15 years of software development Spread over several industries Advertising Local Government Law Enforcement Insurance Currently Employed at United Heritage Ins Fellow, Life Management Institute (FLMI) Awarded by LOMA Gen & Building in Plex for the past 10 years.
Why Customize? - Background At United Heritage, we used WebClient to develop a web application for group insurance enrollment. We ve done mobile applications before with WebClient but this was our first development using the non-mobile version (WebClient Standard). Out of the box the application worked, but was not pretty enough to be presented to the public. Pages looked like a typical Plex generated java application. That isn t necessarily a bad thing but we needed something that had the look and feel of something a bit more modern. This led us to look at building custom templates, controls and overriding the default CSS.
Preface Please be aware that the strategies and techniques used may not be the best way to implement customization in your WebClient applications. This is just how United Heritage went about the customization process with WebClient. The version of WebClient used in this demonstration is not the most current and there have been significant enhancements since version 1.8.2. In development each challenge has multiple paths to achieve a similar outcome.
Application Walkthrough (10:05-10:15)
Customization in WebClient (10:15-10:35)
Brief Overview of WebClient Business Perspective WebClient is a 3 rd party application developed by CMFirst that can web-enable existing business logic using its rich internet application (RIA) generator which integrates with the CA Plex ARAD platform. The CM WebClient Ajax-based framework adds web and mobile application generation directly from the CA Plex development environment from the presentation layer (HTML, JavaScript, Ajax) to backend business logic (RPG,.NET or J2EE). Modified Excerpt from CM WebClient Product Brief http://www.cmfirstgroup.com/wp-content/uploads/2013/04/cm-webclient- Product-Brief-85_11_2.pdf
Brief Overview of Webclient Users Perspective CM WebClient
Customization We ll look at three levels of customization. Templates Attach Points Controls User Defined CSS Templates & Control Parameters
Customization Control Name Control Name Attach Point Control Template Control Parameters Just an identifier that needs to be unique on the page. This value determines in which attach point the control will render. We ll take a closer look how to use these attach points by looking at custom templates.
Custom Templates When creating a custom template, a corresponding Plex function needs to be made where the template name is used for the implementation name of the function. For instance if you have a template called mytemplate-page.wcli then you ll need a corresponding function with a FNC impl Name triple where the name used is mytemplate. Any function that you want to use the template mytemplate just needs to inherit from the function mytemplatefunction.
Custome Templates Attach Points Custom Templates allow you to control the layout of your application through the use of Attach Points. To create an Attach Point you simply just need to add it to a template. /(!AttachPoint:name=myAttachPoint) If you want a control to appear in a particular attach point, then the name of the attach point needs to be specified in the ControlName attribute right after the unique identifier. If the attach point does not exist in the context of the page an error will be encountered on the WebClient build and the control will not be included on the page.
Custom Templates & Attach Point Examples When this control is rendered, it will be nested within the domesticpartneralert div tag.
Customization Control Name Control Name Attach Point Control Template Control Parameters You can govern which control template will be used for rendering using template=myawesomecontrol. This is necessary when utilizing custom controls.
Custom Controls - Example Default WebClient LiteralHTML control This control did not meet our needs, so we built our own. Needed to be able to apply different CSS classes according to the situation or page. Needed to be able to show and hide the control.
Custom Controls How do you use custom controls? Reference the control through the Control Name on the control properties. template=mycontrol Code Example Name referenced in Plex matches name of the control in WebClient. Dynamically building a link based upon the state of residence.
Custom Controls - Tips Base custom controls on pre-built controls. Use a control as similar as possible to the control you want. Start off as generic as possible Build a framework that can be reused by future applications. Most important tip of all Get some training to get you moving in the right direction.
Customization Control Name Control Name Attach Point Control Template Control Parameters These are parameters that can be utilized by the control. In this case we are setting the class of the control to uhmultilineedit
Customization - Control Parameters Some controls have parameters that you can pass to the control to enable cool features Here is a sample of how the hint parameter is used in the WebTextbox.ctrl that comes shipped with WebClient. With Custom Controls you can define your own parameters.
Leveraging CSS Using Custom Control Parameters Custom Controls Prior to WebClient 1.8.3 United Heritage created a number of custom controls just so we could define the class of an object. Current versions of WebClient Use the cls parameter in the control name to reference a class.
Leveraging CSS in WebClient CSS is Awesome Remember, when working with the web, CSS is your friend.
Leveraging CSS Using Templates Custom Templates Add <div> tags around attach points to control layout and assist in building the look and feel of the application.
Challenges Not everything was rainbows & unicorns Difficulties Needed to extensively use the keyword!important to override the css from the dojo framework. Small excerpt from our CSS file
Challenges Not everything was rainbows & unicorns Difficulties Trouble with Internet Explorer What else is new? WebClient forces using the IE 8 standard so some of the controls and CSS features do not render correctly. To counteract this problem we added special IE class parameters to our custom controls so we can use a different class if IE was the browser being used. Future release of WebClient will offer IE Edge support. One thing to note is that some of these CSS problems would be encountered even if coding the application by hand.
Next Steps (10:35-10:40)
What s Next? Seems like a lot of work for one application. True, but this isn t for just one application. Templates, CSS & Custom controls can be made to be reusable. Go slower now so we can go faster later. - Simon Cockayne, CA Plex/2E Product Owner After the framework was built, initially for the United Heritage Group Enrollment System, another developer was able to take that framework and within a week of doing minor alterations to their application and custom CSS tweaks, he was able to reskin his entire application.
Applying the United Heritage WebClient Framework Before After
Links WebClient CMFirst http://support.cmfirstgroup.com/hc/en-us/articles/203016044- Customizing-in-CM-WebClient Dojo Framework https://dojotoolkit.org/documentation/
Q&A
Thank You Enjoy the rest of the conference!