Vibe Custom Development
-
Upload
gwava -
Category
Technology
-
view
51 -
download
2
Transcript of Vibe Custom Development
![Page 2: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/2.jpg)
• 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
![Page 3: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/3.jpg)
• 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
![Page 4: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/4.jpg)
Simple Out-of-the-Box Customisations
![Page 5: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/5.jpg)
• Branding
• Forms
• Workflows
• Templates
• No Coding Required
Simple Customisations
![Page 6: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/6.jpg)
• 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
![Page 7: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/7.jpg)
• 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
![Page 8: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/8.jpg)
Forms (Example)
![Page 9: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/9.jpg)
• 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
![Page 10: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/10.jpg)
Workflows
![Page 11: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/11.jpg)
Landing Pages
![Page 12: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/12.jpg)
• 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
![Page 13: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/13.jpg)
Landing Pages (Examples)
![Page 14: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/14.jpg)
HTML within Vibe
![Page 15: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/15.jpg)
• 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
![Page 16: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/16.jpg)
• 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)
![Page 17: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/17.jpg)
CSS
![Page 18: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/18.jpg)
• 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
![Page 19: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/19.jpg)
<style>
.vibe-dataTableEntry-title{
cursor: pointer;
color: #9f032a!important;
padding: 2px;
font-size: 12px;
white-space: nowrap;
}
</style>
Changing Vibe CSS and Colors
![Page 20: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/20.jpg)
JavaServer pages (JSP)
![Page 21: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/21.jpg)
• 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
![Page 22: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/22.jpg)
• 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
![Page 23: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/23.jpg)
• 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
![Page 24: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/24.jpg)
Login.jsp
![Page 25: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/25.jpg)
Login.jsp on a Landing Page
![Page 26: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/26.jpg)
• 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
![Page 27: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/27.jpg)
• …/webapps/ssf/WEB-INF/jsp/custom_jsps/login.jsp
How to use:
![Page 28: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/28.jpg)
Nav.jsp
![Page 29: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/29.jpg)
Nav.jsp on a Landing Page
![Page 30: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/30.jpg)
• 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
![Page 31: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/31.jpg)
<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
![Page 32: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/32.jpg)
scrollblog.jsp
![Page 33: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/33.jpg)
scrollblog.jsp on a Landing Page
![Page 34: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/34.jpg)
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
![Page 35: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/35.jpg)
• How to add a new link to the footer toolbarss_call_out_head.jsp
Add a Custom Toolbar Item (Example)
![Page 36: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/36.jpg)
• Need to include• <%@ include file="/WEB-INF/jsp/definition_elements/init.jsp" %>
• Access an element• ${ssDefinitionEntry.customAttributes['FirstName'].value}“
Useful Tips for JSPs
![Page 37: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/37.jpg)
• Standard attributes• ${ssUser.firstName}
• Custom attribute• ${ssUser.customAttributes['manager'].value}
User information from the profile
![Page 38: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/38.jpg)
Custom Form Elements
![Page 39: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/39.jpg)
• 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
![Page 40: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/40.jpg)
• 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
![Page 41: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/41.jpg)
• <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
![Page 42: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/42.jpg)
Custom Actions and Transitions
![Page 43: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/43.jpg)
• 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
![Page 44: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/44.jpg)
Other Development Options
![Page 45: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/45.jpg)
• 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
![Page 46: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/46.jpg)
• Can package your solution up• Single zip file with all components
• Can be deployed through the Administration Interface
Extensions
![Page 47: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/47.jpg)
Further information
![Page 48: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/48.jpg)
• 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
![Page 49: Vibe Custom Development](https://reader033.fdocuments.net/reader033/viewer/2022042619/587430cc1a28ab72188b787f/html5/thumbnails/49.jpg)
www.microfocus.com