vibe custom development

Robin Redgrave

Solutions Consultant

[email protected]

Vibe Custom Development

• Simple out of the Box Customisations• Branding, Forms, Workflows, Templates, Landing Pages

• Concepts of Coding within Vibe• HTML, CSS, JSP

• Other development options• SOAP/Application

Vibe Custom Development

• I would not call myself a java developer

• I am not going to teach you• HTML

• CSS

• Java

• I will show you the principles behind Vibe custom Dev• And give you sample code

Some Expectations

Simple Out-of-the-Box Customisations

• Branding

• Forms

• Workflows

• Templates

• No Coding Required

Simple Customisations

• Available Globally (Site Wide)

• Inherited by locations below

• Available Locally

• Anyone can add branding to their Workspaces and Folders

• Allows for both Text and Graphics

• Allows for Links (Ex. A “home” Button)

• No coding necessary

Branding

• Create new entry types• Electronically submit previously paper based forms

• Entry data is searchable

• New entry types can be used globally or maintained locally

• Can leverage the Vibe Resource Library

• No coding required

• Can select from over 30 different pre-defined elements

Forms

Forms (Example)

• Allow for encapsulation of business processes

• Can manage Access Control through an entry’s lifecycle

• Email Notifications

• Parallel processing

• No coding required

• Simple to deploy

Workflows

Workflows

Landing Pages

• Provides a nice introduction to your workspace

• Cleaner layout, easy to understand

• Dynamically updated with the latest information• Content is pulled from other folders and entries

• Easy to create and manage• Multiple people feeding information onto one landing page

Landing Pages

Landing Pages (Examples)

HTML within Vibe

• Basic HTML code can be used:• Within entries via text editor feature

• On Forms/Views for special formatting

• Within Branding definition

• Within Landing pages

• Basic HTML code is rendered as written

• No server access required

HTML

• Edit zone-ext.cfg.xml• In …\apache-tomcat\webapps\ssf\WEB-INF\classes\config

• inside the <zoneConfiguration> tags add

<zone name="kablink"><xssConfiguration>

<trustedUsers><user name=“rredgrave"/>

</trustedUsers></xssConfiguration>

</zone>

Enabling Cross Site Scripting (XSS)

• CSS within Vibe is handled within JSP files• These files can be “over-ridden” via custom_jsps folder

• Note that styles are used throughout the entire application

• Changing styles in one place changes that style for the entire installation

• ss_call_out_css_init.jsp• Customise any existing style to meet your needs

• Vibe will use styles in this file to override the default styles

• Use browser tools to determine styles used

CSS

JavaServer pages (JSP)

• Server Side Programming with access to data via JAVA Beans

• Allows for JSP based Customisations• Can be defined for Landing Pages

• Can be used in Form/View Definitions

• Can be used to customise the interface throughout Vibe

JSP – JavaServer Pages

• Requires server access• Samples are provided to assist:

• …/WEB-INF/jsp/custom_jsps/samples

• Vibe expects new JSPs to be in the /custom_jsps/ folder

• Vibe must be restarted to utilize

• Unless,,,,

JSP – JavaServer Pages

• No need to restart vibe after editing a JSP

• Edit web.xml• In …/apache-tomcat/conf

• Change development value to true

<init-param>

<param-name>development</param-name>

<param-value>true</param-value>

</init-param>

Enable Developer Mode

Login.jsp

Login.jsp on a Landing Page

• Step 1: Place the JSP file into custom_jsps folder• Best Practice: Place in a Sub-directory

• Step 2: Add "custom JSP element“ to landing page, indicate the location of the JSP file.• When using subfolder – sub-folder/myJSP.jsp

Steps to utilise Login.jsp

• …/webapps/ssf/WEB-INF/jsp/custom_jsps/login.jsp

How to use:

Nav.jsp

Nav.jsp on a Landing Page

• Step 1: Place the JSP file into custom_jsps folder• Best Practice: Place in a Sub-directory

• Step 2: Add "custom JSP element“ to landing page, indicate the location of the JSP file.• When using subfolder – sub-folder/myJSP.jsp

Steps to utilise Nav.jsp

<ul>

<c:forEach var="binder" items="${ssBinder.childWorkAreas}" varStatus="status">

<li class='active '>

<a href="<ssf:url crawlable="true" adapter="true" portletName="ss_forum" action="view_permalink" binderId="${binder.id}">

</ssf:url>" id="wows1_${status.count}" >

<span>${binder.title}</span></a>

</li>

</c:forEach>

</ul>

Nav.jsp Code Review

scrollblog.jsp

scrollblog.jsp on a Landing Page

Steps to utilise scrollblog.jsp• Step 1: Place the JSP file into custom_jsps

folder

• Best Practice: Place in a Sub-directory

• Step 2: Add "custom JSP element“ to landing page, indicate the location of the JSP file.

• When using subfolder – sub-folder/myJSP.jsp

• Step 3: Associate a Blog folder with the JSP

• Can be a Blog from anywhere in the system

• How to add a new link to the footer toolbarss_call_out_head.jsp

Add a Custom Toolbar Item (Example)

• Need to include• <%@ include file="/WEB-INF/jsp/definition_elements/init.jsp" %>

• Access an element• ${ssDefinitionEntry.customAttributes['FirstName'].value}“

Useful Tips for JSPs

• Standard attributes• ${ssUser.firstName}

• Custom attribute• ${ssUser.customAttributes['manager'].value}

User information from the profile

Custom Form Elements

• Can use existing elements as a basis for JSP

• Look in definition_builder_config.xml• In …/apache-tomcat/webapps/ssf/WEB-INF/classes/config

• Find your element• And the associated JSP

• Edit as required

Modifying Existing JSPs

• Copy JSP onto server• …/webapps/ssf/WEB-INF/jsp/custom_jsps

• Edit definition_builder_config.xml• In …/apache-tomcat/webapps/ssf/WEB-INF/classes/config

• Add section for your element

Adding JSP as a New Element

• <jsp name="default" value="/WEB-INF /jsp/custom_jsps/password.jsp" />

• Name cane be for different actions• default • template

• mobile • form

• view

• Will need to re-apply after upgrading

Can Specify different jsps for each situation

Custom Actions and Transitions

• Java Class

• Action• Used on entry/exit

• Can let Vibe make changes to an external application

• Transition• Used to make routing decisions

• Lets you check something external to Vibe

• Route as required

Workflow Custom Actions and Transitions

Other Development Options

• SOAP (Web services) interface• Download from the Documentation Web Site

• Currently in the ‘Vibe 4.0 Documentation (PDFs)’

• Applications• Display remote HTML in vibe

Other development options

• Can package your solution up• Single zip file with all components

• Can be deployed through the Administration Interface

Extensions

Further information

• JSP examples can be found at• https://vibe.novell.com/novl/rredgrave/vibecustomdev

• Vibe resource library• https://www.novell.com/products/vibe/resource-library/

Try it out

www.microfocus.com

vibe custom development

Technology