IBM Connections Customization: Add custom jsp containing navigation, header, footer - ibm-connections

We're currently adding a custom jsp file, which can be browsed by clicking a link in the (customized) navigation bar.
Said new page should look like a "native" page in connections and therefore of course contain headers, navigation, footers like any other page in IBM Connections. We added a <jsp:include> for the header.jsp file, which results in the links being shown in the resulting html. However, the styles and js are still missing.
To get around this, we included <lc-ui:dojo include="${javascriptModuleInclude}" /> into our page, since we observed this in other (native) connections jsp files. Sadly, that did not work out at all.
We can't find any help on this in the customization Documentations and the only thread in the official Connections Forum did not receive an answer http://www-10.lotus.com/ldd/lcforum.nsf/d6091795dfaa5b1185256a7a0048a2d0/b9b5303e92c5676d85257c040046ff8c?OpenDocument
Does anyone have insights or even a hint were to look for a solution here?

Customization Dir is located on your system in a directory like /local/IBM/Connections/data/shared/customization
customizationDir/themes/applications/profiles.css
override the css values for lotusPostDetails, you can check exactly what renders the css *rules wise in Firebug, and selectively override
Learn more info at
http://infolib.lotus.com/resources/connections/4.5.0/doc/accessible/admin/en_us/acc_p4.html
Subtopic... Determining where to save your customizations
You will need to restart the Connections Server before the customizations take effect.
you can add common.css as well.
also you can reference oneui as well http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm

The bare minimum dependencies required to make the <lc-ui:dojo> tag work in a third party JSP page are:
lc.util.base-3.0.jar
lc.util.web-3.0.jar
lc.config.svc-1.1.jar
com.ibm.connections.directory.services.jar
Please keep in mind that this is not a supported use case — as you pointed out, you're reverse engineering native Connections JSP files. The Connections banner will probably be offered as a reusable UI component through the SBT in the near future.

Related

Rotating banner images are displayed one below the other

When I try to implement rotating banner (RotatingImagesComponent)images are getting displayed one below the other in hybris 1905 on Any quick help is appreciated. I have tried SimpleResponsiveBannerComponent, but same effect.
I assume you're trying to add a slider/carousel to your storefront.
The RotatingImagesComponent is a container used to render multiple BannerComponent components in a carousel.
Try adding BannerComponent type of components inside the banners section of RotatingImagesComponent.
faced a similar issue in past, in my case it was because of conflict between different versions of the bootstrap file(stand-alone file and CDN). If no problem with the hybris, please check the UI side.
That looks like your static files (js, CSS, etc) were not loaded properly.
Check first the console and network in the browser's developer tools for the particular page. to identify the errors that might be there

Custom SharePoint Responsive Master Page

We had a responsive html that was made responsive using bootstrap. Using Design manager i created a master page from it. Every thing works fine except 2 things.
Global Navigation doesn't match the UI, So i have applied all bootstrap classes using jQuery. Menu seems good later but at time of loading it looks bad.
When i go to add an app page, It shows only 4 apps. Search over there is not working as well as "Apps you can add" option is not visible on the page.
Can you provide exact steps that are to be followed in order to get it working fine?
For the part of question related to global navigation what you can do it in two ways.
Hide the global navigation using css first. Apply the bootstrap classes using jQuery and then show it on page to avoid loading effect.
Try to pull global navigation data using REST and generate html and append it on page using jQuery. Try this link : https://sharepoint.stackexchange.com/questions/116393/get-links-from-sharepoint-2013-global-navigation-using-rest

Whitelist Chrome fonts via extension

I'm looking for a way to whitelist fonts that pages in Chrome can use. In Firefox I would just simply disable Allow pages to choose their own fonts, instead of my selections above in content settings but Chrome seems to be keen on letting web designers force ugly and often unreadable fonts on us.
I don't want to use * { font-family: sans; } style in Stylish, because I want to keep sans (or serif) and monospace sections, and web designers, insane as they are, usually keep those at the end of the font-family list.
I've done my research and I still can't figure out how to do it via Chrome extension API.
I considered intercepting requests for CSS files and modifying them in response but this isn't possible via current API.
I could also traverse the DOM tree, inspect CSS on each node and replace it appropriately but it'd expensive. Moreover this wouldn't work for pages which build the content from JavaScript. So I'd have to use MutationObservers and that would be way too expensive.
If I could somehow read CSS files that the current tab is using, I could collect the rules with font-family style and inject appropriate <style> element into the page via content script. But I couldn't find a way to read those CSS file via current API. (I'd also have to read <style> rules embedded in HTML but that's doable).
I could also do it via some proxy but I'm not sure how to (securely) cope with SSL.
I could get close with fontconfig. It gets rid of Arial but doesn't work for external (and usually most ugly) CSS fonts.
Is it possible to achieve my goal via current Chrome extension API? How? If not, what would be the workaround?
I don't care about inline styles and styles set from JavaScript. I can live with those. Vast majority of pages I'm concerned about use styles from external stylesheets.
EDIT
wOxxOm's advice to modify document.styleSheets is the way to do it and I've made a simple extension that worked on all sites! Unfortunately, in current Chrome, CSSStyleSheet#cssRules returns null for stylesheets loaded outside of page origin https://code.google.com/p/chromium/issues/detail?id=45786. T_T
(I'll of course publish the extension on GitHub and post the link here after I polish it).
EDIT 2
As wOxxOm suggested, blocking web fonts is also an option (though less ideal I'd say) and there even exist good open source extension for it https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg. It needs some white list for iconic fonts though. Local fonts can then be managed via fontconfig.
This issue is probably related to ugly looking web fonts https://code.google.com/p/chromium/issues/detail?id=173207.
EDIT 3
I ended up with this nice (and open source) extension https://chrome.google.com/webstore/detail/font-blocker/knpgaobajhnhgkhhoopjepghknapnikl. It's a blacklist but that's enough for my needs and it works with iconic fonts. As far as I can tell, to implement a font whitelist extension I'd have to be able to enumerate all fonts loaded by a web page and that appears to be impossible in current Chrome (see first edit).

How do all types of Chrome extension scripts work?

I'm new to Chrome extensions and would like to understand how all types of scripts/pages work.
Here is my understanding:
First - there are "content scripts", ones that should be used to actually modify the pages.
Second - there is a "background script", designed to work like as a server that you send and receive messages from, but it does not modify the pages' DOM; so it can perform tasks like dealing with storage and communicating between scripts but not modifying the page.
Lastly - there are "popup scripts", they are separated from both content scripts and background scripts, but you can still send/receive messages between them.
The popup scripts can NOT directly modify the page (same as background script), they can only send messages to the other two.
You do not declare them at all in the manifest file, you can just go straight and use them in your popup html file.
In the end only the content scripts can eventually actually modify a page.
Am I correct?
One Chrome extension documentation Link to rule them all, One Link to find them,
One Link to bring them all and in the darkness bind() them1:
>> Architecture Overview <<
(artist's impression)
It should answer many of your questions. However, that would be a bad SO answer, so a summary from me:
Background page/scripts: Only one page exists per extension. It is invisible and can never be displayed in a tab. Normally, it is open as long as Chrome is open, though there are exceptions. Since it's always there and has the highest level of access to Chrome APIs, it's frequently used for main logic / event routing between parts of the extension. In short, background work.
Event page/scripts: A variant of background pages that are unloaded if there is no code running. This saves memory, but introduces complexity as to maintaining state. Chrome remembers which events should be listened to (via addListener) and loads the page again when they happen. Hence, event page.
Besides that, extension can have other, visible pages. You can just open them in a tab (they would have chrome-extension://extensionidgoeshere/page.html address), and they will have same level of access to Chrome API. Two UI types are special to extensions though:
Browser/Page Action popup: A small window that's opened with a click on the corresponding UI element. Unfortunately, it's also very fragile - it will close as soon as it loses focus. Other than that, it's just an extension page.
Options page: Comes in two flavours. Version 1 Options page is just a tab that's opened when invoking options for an extension; Version 2 Options page can optionally show in a special box inside chrome://extensions/. Again, other than that it's just a page with extension privileges.
Finally, having a bunch of pages is fun, but if you want to interact with existing pages/tabs, you'll need to inject scripts in them.
Content Scripts are scripts that run alongside pages; for compatibility reasons, they run in an isolated world. For security reasons, they are severely limited in access to Chrome API. But they share the DOM with the page, and as such can modify it.
Page-level Scripts is something you barely find mentioned in documentation (as "DOM injected scripts"), but they are very useful to break the barrier between extension JavaScript and page's own JavaScript. A good overview of them is presented in this answer by the magnificent Rob W.
Having defined all relevant extension parts, the documentation page also briefly mentions how to communicate between them. For a more in-depth look into this aspect, see this answer (again by Rob W) and the Messaging documentation.
1 Seriously though, every beginning extension developer needs to read that, and this page is not prominent the documentation. Good job, Google.

How do you globally modify page output sent from IIS without modifying the page source?

A couple sites of mine recently got "hacked". Someone was able to add a line of JavaScript to the bottom of every page on the site.
The server is a Windows Server 2003, and has Cold Fusion 8 and MySQL 5.x installed and running.
Looking into the code on each page shows that none of the pages were modified. The JavaScript is not in the code files themselves. This leads me to believe it is an IIS problem, but I am unsure and cannot find anything that would be able to do this within IIS.
The JavaScript being added redirects a user to another page only when they come from Google, or at least it appears to work this way.
Any help on how someone was able to accomplish this as well as removing it would be greatly appreciated.
Another way to word the question thanks to #Jeffrey Hantin
How do you systematically modify output from IIS without modifying individual pages?
EDIT: A bit more testing has shown that only the .cfm pages add the extra javascript. Added a new .cfm and the js was there but a .html did not have it.
Edit2: Turns out to have been a coldfusion problem after all. Somehow the pages OnRequestEnd.cfm were created on the sites and added that js.
Looks like someone exploited some latest Adobe CF vulnerabilities.
Please see these blog posts for details and try to search symptoms on your server:
Image upload
FCKEditor bug + this post
Hope this helps.
Turns out to have been a coldfusion problem after all. The page OnRequestEnd.cfm were created on the sites and added that js.
If you only want to use IIS to modify output, the ISAPI filter is probably the best answer. If you would like to use Coldfusion, you could utilize the application.cfc to modify output during certain parts of the request cycle or wrap all of your pages in a Custom Tag to consolidate the like portions of your page templates.
I have used both. In cases where my page headers and footers are all the same, the custom tag is fast and easy to use. To make changes to all the pages, you edit one custom tag file. In cases where I have a more complicated web application I'll use the application.cfc to store and insert common components where they are needed.
They might have guessed your password. You should change it immediately.
It's possible that an ISAPI filter is used to do this. I once used one myself to perform compression before IIS supported it natively.
In your specific situation, you may want to check for ISAPI filters you don't want installed. Of course, if your server has been compromised, you will likely be better off rebuilding from a known good image rather than trying to fix it in situ.

Resources