Develop Reference

How to change page size Margins and document language through Word Api ? is any alternate way to do that?

i tried to find word api for that but i guess that is not available
right now so i thought i can do it by modifying the xml but that
also didn't work, need to change page size margin and document
language
await Word.run(async (context) => {
var paragraphs = context.document.body;
// Queue a command to load the style property for the top 2 paragraphs.
paragraphs.load("style")
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
return context.sync().then(function () {
// let replacedXml=""
// Queue a a set of commands to get the OOXML of the first paragraph.
var ooxml = paragraphs.getOoxml()
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
return context.sync().then(function () {
// console.log('Paragraph OOXML: ' + ooxml.value);
console.log(ooxml.value)
let str=String(ooxml.value)
let replacedXml =ooxml.value
// paragraphs.items[0].insertOoxml(replacedXml,Word.InsertLocation.replace)
// context.document.body.insertOoxml(replacedXml, Word.InsertLocation.replace);
var range = context.document.getSelection()
range.insertOoxml(replacedXml,"Replace")
// console.log(replacedXml)
});
});

i tried to find word api for that but i guess that is not available right now
The answer is yes. Here is no such api having functionality as your expectation for now and in recent future.
so i thought i can do it by modifying the xml but that also didn't work, need to change page size margin and document
OOxml is a powerful way to change doc file indeed, but it is only applicable for those very experienced, has a bit unsatisfying performance online and may cause some problems hard to interpret. So in most cases, we don't recommend using ooxml to achieve one's goal actually.
Btw, we suggest to test above code in word desktop app. Only if insuring the correctness of code could support us to go on investigating.
At last, you can submit your request in https://techcommunity.microsoft.com/t5/microsoft-365-developer-platform/idb-p/Microsoft365DeveloperPlatform if you really want new api.

PowerBi-Javascript: How do I find out the visualName value for setting a slicer?

I'm attempting to use Microsoft's PowerBi-Javascript library to embed a report in a webpage. I want to apply a slicer on load, that depends on the actual page I'm on (so can't be done by defaults on the report).
The library wiki gives a way to do this by setting slicers in the config passed to the embed function. The slicer object looks something like this (from the documentation https://github.com/Microsoft/PowerBI-JavaScript/wiki/Slicers):
interface ISlicer {
// Selects a slicer to change.
selector: SlicerSelector;
// A new state of the slicer
state: ISlicerState;
}
interface ISlicerSelector {
$schema: string;
visualName: string;
}
I'm happy with setting up the state using the filtering examples given, but I'm having problems finding the visualName for the selector - I can't see it in the interface (on viewing or editing), and I've tried using the names/headers etc I can see, none of which work.
How do I find out and/or set what this visualName is?

I've not found a way in the UI to see this. Hopefully there is a better way than the below, but this does work.
However, it is possible to find out using the api, or using this library if you're able to mess around running some code locally.
In my case, I found out by (while developing locally) finding the page and then the visuals that were displaying once the report had rendered, logging the data to the console, and identifying which visual was the one I wanted.
Something like:
report.on('rendered', () => {
report.getPages().then(pages => {
pages[0].getVisuals().then(visuals => console.log(visuals))
});
});
Where in this case I only cared about the first page.
This then logged some data to the console about each visual, including co-ordinate values and visualName, so I was able to identify the one I was interested in and see its visualName property.
Confusingly, the visualName property looks more like an id (although not a guid).

You can set the Visual Title (not the Slicer Title) on the slicer under General > Title > Text.
Screenshot
Then, you can find the slicer using the visual.title property.
For example,
report.on('rendered', () => {
report.getPages().then(pages => {
pages[0].getVisuals().then(visuals => console.log(
visuals.find(visual => visual.title === "MySlicer")
);
});
});

Testing tab navigation order

In one of our tests, we need to make sure that the tab keyboard navigation inside a form is performed in the correct order.
Question: What is the conventional way to check the tab navigation order with protractor?
Currently we are solving it by repeating the following step for as many input fields existing in a form (code below):
check the ID of the currently focused element (using getId())
send TAB key to the currently focused element
Here is the example spec:
it("should navigate with tab correctly", function () {
var regCodePage = new RegCodePage();
browser.wait(protractor.ExpectedConditions.visibilityOf(regCodePage.title), 10000);
// registration code field has focus by default
expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved to Remember Registration Code
regCodePage.registrationCode.sendKeys(protractor.Key.TAB);
expect(regCodePage.rememberRegistrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved to Request Code
regCodePage.rememberRegistrationCode.sendKeys(protractor.Key.TAB);
expect(regCodePage.requestCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved to Cancel
regCodePage.requestCode.sendKeys(protractor.Key.TAB);
expect(regCodePage.cancelButton.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
// focus moved back to the input
regCodePage.cancelButton.sendKeys(protractor.Key.TAB);
expect(regCodePage.registrationCode.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
});
where regCodePage is a Page Object:
var RegCodePage = function () {
this.title = element(by.css("div.modal-header b.login-modal-title"));
this.registrationCode = element(by.id("regCode"));
this.rememberRegistrationCode = element(by.id("rememberRegCode"));
this.requestCode = element(by.id("forgotCode"));
this.errorMessage = element(by.css("div.auth-reg-code-block div#message"));
this.sendRegCode = element(by.id("sendRegCode"));
this.cancelButton = element(by.id("cancelButton"));
this.closeButton = element(by.css("div.modal-header button.close"));
};
module.exports = RegCodePage;
It is working, but it is not really explicit and readable which makes it difficult to maintain. Also, another "smell" in the current approach is a code duplication.
If the current approach is how you would also do it, I would appreciate any insights about making it reusable.

I think the PageObject should define a tab order list, since that is really a direct property of the page, and should be expressible as simple data. An array of items seems like a sufficient representation, so something like:
this.tabOrder = [ this.registrationCode, this.rememberRegistrationCode, this.requestCode, this.cancelButton ];
Then you need a bit of generic code that can check a tab order.
function testTabOrder(tabOrder) {
// Assumes TAB order hasn't been messed with and page is on default element
tabOrder.forEach(function(el) {
expect(el.getId()).toEqual(browser.driver.switchTo().activeElement().getId());
el.sendKeys(protractor.Key.TAB);
});
}
Then your test would be something like:
it('has correct tab order', function() {
var regCodePage = new RegCodePage(); // this should probably be in the beforeEach
testTabOrder(regCodePage.tabOrder);
});
Of course, this assumes each element has a "getId()" method that works. (That seems like a reasonable assumption to me, but some environments may not support it.)
I think this keeps the tab-order nicely isolated on the PageObject (so its easy to keep in sync with the page content and doesn't get lost in the code that verifies the order). The testing code seem "optimistic" (I suspect the real world will introduce enough problems that you will end up expanding this code a bit).
I haven't tried any of this yet, so feel free to downvote if this doesn't work. :)
Also, I believe the forEach loop will work as-is, but I wouldn't be surprised if it needs some more explicit promise handling to make the dependencies explicit.

Drupal - OpenLayers - Alter popup behavior

I have modified the popup behavior js file: openlayers_behavior_popup.js directly in the module located at openlayers/plugins/behaviors.
It's working fine per my expected but I do not want to put my own modification in the original module, I want to add it attach to my existing module but I don't know how to do this.
I want the site not to take the behavior at openlayers/plugins/behaviors but follow with my popup behavior code from my own module.
Drupal.openlayers.addBehavior('openlayers_behavior_popup', function (data, options) {
// normal
var popupSelect = new OpenLayers.Control.SelectFeature(layers,
{
// my change here!!
},
onUnselect: function(feature) {
// normal
}
}
);
});
How can I alter the behavior code of openlayers?

I have solved my issue on this topic by load the modification javascript file in my custom module as following:
function mycustom_openlayers_init() {
// you might want to load only at some specific page
// if you want so, please have a look to function arg() of drupal
// place condition before loading the js file below
drupal_add_js ( drupal_get_path ( 'module', 'mycustom_openlayers' ) . '/js/openlayers_behavior_popup.js', array(
'weight' => '9999',
) );
}
By specifying the setting of weight bigger, my javascript is loaded after loading the original openlayers popup file and then it overrides the behavior of the original to take mine instead.
I don't know if it is the right thing to do but it works for me.
Please let me know if other people could give me a programmatic solution on that and better than above.

CodeMirror: make atomic range of token

I'm implementing CodeMirror to use as an editor for special files that require some syntax highlighting. I wrote my own parser for it, but now I face the following problem: there is a specific kind of token that I would always like to mark as an atomic range (with doc.markText).
I would have thought that there would exist some event handler for when tokens have been parsed, containing {line, ch} objects for its start and end positions. Reading through the docs, this does not seem to exist, so I would write my own, but the problem is that there seems to be no way to get any kind of position data whatsoever related to the parser.
What would be the best way to go about this? There are really crude ways like registering a change handler or iterating over the whole contents every few seconds, but of course this should be avoided.

I've forked the CodeMirror github repo and made an event that fires when a token gets parsed.
The syntax is this:
"tokenParsed" (instance: CodeMirror, start: {ch, line}, end: {ch, line}, style: String, text: String)
And then I handle it as follows:
myCodeMirror.on("tokenParsed", function(instance, start, end, style, text) {
if(!instance.findMarksAt(end).length) { //check if the mark doesn't exist yet
if(style && style.indexOf("param") > -1) {
instance.markText(start, end, {atomic: true});
}
}
});
If anyone wants this, see my repository.