OfficeJs - Get Font/Theme colors of excel/powerpoint file - excel

How can i get excel/powerpoint theme colors in font settings via officeJs?
Is it possible at all?
I need first row, but if i get all rows it is not problem.

You may have a try Office.OfficeTheme API, see if this API works for you. the document can be found at https://learn.microsoft.com/en-us/javascript/api/office/office.officetheme?view=word-js-preview,
function applyOfficeTheme(){
// Get office theme colors.
var bodyBackgroundColor = Office.context.officeTheme.bodyBackgroundColor;
var bodyForegroundColor = Office.context.officeTheme.bodyForegroundColor;
var controlBackgroundColor = Office.context.officeTheme.controlBackgroundColor;
var controlForegroundColor = Office.context.officeTheme.controlForegroundColor;
// Apply body background color to a CSS class.
$('.body').css('background-color', bodyBackgroundColor);
}
if this doesnt work for you, that should be a new feature ask, and then you could submit your request in uservoice and upvote for this feature at https://officespdev.uservoice.com/forums/224641-feature-requests-and-feedback?category_id=163563. and upvote for this feature. thanks for your support

Related

How to enable browser spellcheck in pe:ckEditor

pe:ckEditor is used in my program by a user to enter new e-mail message content. Users need browser spellcheck enabled.
I know that the ckEditor, on which the pe:ckEditor is based, can have this enabled by adding config.disableNativeSpellChecker = false; to config, however pe:ckEditor does not have a config file and is modified by values of its attributes. Though, I have not found in its doc any attribute that would achieve this.
I checked similar questions here, but vast majority of them is about ckEditor and modifying its config, which is useless for this case.
Please, let me know if you know a solution to this issue.
Have you tried defining your own custom config JS file like..
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.disableNativeSpellChecker = false;
};
And then calling the PFE customConfig option like...
<pe:ckEditor id="editor"
value="#{editorController.content}"
customConfig="#{request.contextPath}/js/config/myconfig.js" />
Or as of PFE 8.0.1 there is a new attribute "disableNativeSpellChecker='false'" you can set on the pe:ckeditor itself
https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/763
Regarding the previous answer from #Melloware, I reported an issue. Based on it a new attribute to modify this behaviour has been made. See https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/763.

Customising PDFTRON Signature tool in Webviewer

I have been exploring pdftron for my website on my trial version,but I could not find any specific examples for customising the signature tool,Any help appreciated.
This guide provides information about the signature tool and some of the APIs available https://www.pdftron.com/documentation/web/guides/advanced/signature
For example here's a code snippet from the guide about how to customize the sign here element.
var createSignHereElement = Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement;
Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function() {
// signHereElement is the default one with dark blue background
var signHereElement = createSignHereElement.apply(this, arguments);
signHereElement.style.background = 'red';
return signHereElement;
}
If you want to do more complicated customizations to the UI, the WebViewer UI components are all open source and able to be modified. Here is a link to the SignatureModal component that can get you started https://github.com/PDFTron/webviewer-ui/tree/master/src/components/SignatureModal
This guide discusses how to edit and run the UI https://www.pdftron.com/documentation/web/guides/ui/advanced-customization

Google file picker Recent tab

I got a Google drive picker item on my web app. Looking at Google Docs I find out the it display one option tab called "Recent".
Following the documentation at https://developers.google.com/picker/docs/reference I couldn't find any reference to this tab mode, only found "Recently Picked" for files I recently picked from the picker, but I'm looking to emulate this function.
My current code is
new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
.setAppId(appId)
.setOAuthToken(oauthToken)
.addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(true))
.addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(false))
.addView(new google.picker.DocsView().setStarred(true).setLabel('Starred'))
finally after reading the documentation of Google picker and the google groups dedicated to it, I figured out that there is no preset or config for recent uploaded files and even trying to build a custom view with google.picker.view, the query field is quite limited and didn't allow the option to sort the files.
After reading the javascript code of docs.google.com for the file picker I found few variables that are accessible in the moment when you call the method .addView(). This field are:
El: is the filter type for the document type.
mc: this old the whole view configuration and fields. Example: mc.query is equivalent for the View.setQuery.
xd: this field manage the View title in the top nav tab title.
While this method is a bit hacky, is the only option I got in the meantime to replicate the "recent" view tab from google docs. Here is the code I used:
let recentView = new google.picker.DocsView();
recentView.xd = 'Recent';
recentView.mc.sortKey = 15;
let picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.enableFeature(google.picker.Feature.SUPPORT_TEAM_DRIVES)
.setAppId(appId)
.setOAuthToken(oauthToken)
.addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(true))
.addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(false))
.addView(new google.picker.DocsView().setIncludeFolders(true).setStarred(true).setLabel('Starred'))
.addView(recentView)
.addView(new google.picker.DocsUploadView().setIncludeFolders(true))
.setDeveloperKey(developerKey)
.setCallback(onFilePickerCB)

Load PDF inside a Bootstrap Accordion

I have been trying to load some PDFS that will show inside a Bootstrap accordion. The problem is that they load in a lot of different ways depending on the browser. I've been trying iframe and object html tags with different results and i have a huge flow in Safari where the accordion functionality breaks completely when i embed a PDF inside a panel.
So i guess my question is: Is there any sort of standard regarding crossbrowsing in order to make embeded PDF'S work in Chrome, Safari, IE11 and Firefox ?
Since i need this to work on mobile the situation is even worst. Some advice will be really appreciated.
Create a canvas element with the class "panel-body" and give it an id of your choosing. Then add the following code to your document ready event.
PDFJS.getDocument('YOURPDF.pdf').then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('pdfOne'); // The id of your canvas
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
That will get the first page rendered. You'll need to create buttons to let the user navigate through the document but it should be easy enough to get that working based on what I've provided and the samples.

Coded UI: Find Element(s) by CSS Selector

I am trying to build out a harness for a page so that we can write tests against it. What I would like to be able to do is use a CSS selector to find the given element or elements instead of manually modifying the SearchProperties or FilterProperties.For a web test the CSS Selector seems far more intuitive then the SearchProperties do. Is there some mechanism for doing this that I am simply not seeing?
Try this...
https://github.com/rpearsondev/CodedUI.jQueryExtensions/
It adds extension methods to the BrowserWindow object...
var example1 = browser.JQuerySelect<HtmlHyperlink>('a.class1');
var example2 = browser.JQuerySelect<HtmlListItem>('li.class2');
However, I will let you know I'm having issues with it complaining about casting errors regularly.
Try browserWindow.executeJavascript if you return a control you found via css/xpath it returns the relevant uiControl object
const string javascript = "document.querySelector('{0}');";
var bw = BrowserWindow.Launch(new Uri("http://rawstack.azurewebsites.net"));
string selector = "[ng-model='filterOptions.filterText']";
var control = bw.ExecuteScript(string.Format(javascript,selector));
HtmlEdit filter= control as HtmlEdit;
filter.Text = "Alien";
As sjdirect noted, the jQuery extensions are probably the way to go if you want to use those type of selectors.
However, it seems that you may be interested in some abstraction that doesn't require directly setting search / filter properties on the UITestControl objects.
There are good abstractions that do not use the same selectors as jQuery, but provide a readable, consistent approach for finding elements in the page and interacting with them.
I would recommend also looking into Code First and CodedUI Fluent (I wrote the fluent extensions) or even CodedUI Enhanced (CUITe).
These provide query support for that looks like (from CUITe):
// Launch the web browser and navigate to the homepage
BrowserWindowUnderTest browserWindow = BrowserWindowUnderTest.Launch("https://website.com");
// Enter the first name
browserWindow.Find<HtmlEdit>(By.Id("FirstName")).Text = "John";
// Enter the last name
browserWindow.Find<HtmlPassword>(By.Id("LastName")).Text ="Doe";
// Click the Save button
browserWindow.Find<HtmlInputButton>(By.Id("Save")).Click();

Resources