Creating a custom Dialog for Link

Post here questions and problems related to oXygen frameworks/document types.
pramanikhimangshu
Posts: 17

Creating a custom Dialog for Link

Thu Jan 11, 2018 9:24 am

Hello,

I am new to the JS api provided to customize Frameworks in Web Author.
As demonstrated in the example of customizing DITA framework by writing custom code using Oxygen JS api in framework.js I could implement the code for attaching the external link.
The current implementation uses :

Code: Select all

var text = window.prompt("Please enter the link attribute");
this prompt to take link value from the user.
Instead of using this prompt I implemented a dialog box with a html input type text and a OK_CANCEL button configuration, but I cannot create the events for buttons(OK and Cancel) displayed in the dialog.
Will appreciate any help there.

Thank you.
Regards,
Himangshu.
mihai_coanda
Posts: 5

Re: Creating a custom Dialog for Link

Thu Jan 11, 2018 10:43 am

Hello Himangshu,
This is a sample code on how to use a dialog:

Code: Select all

function actionTriggered() {
    if(!myDialog) {
      myDialog = createDialog();
    }

    myDialog.getElement().innerHTML =
      'My custom HTML content';

    myDialog.show();
    myDialog.onSelect(function(e) {
      // The event contains information on the selected button.
      console.log('Event: ', e);
    });
}

More information on the onSelect function and a complete dialog api documentation can be found at https://www.oxygenxml.com/maven/com/oxygenxml/oxygen-webapp/19.1.0.0/jsdoc/sync.api.Dialog.html

Regards,
Michael
pramanikhimangshu
Posts: 17

Re: Creating a custom Dialog for Link

Fri Jan 12, 2018 10:04 am

Hi Michael,

Thank you for your quick reply it worked and I can handle the button clicks for the particular dialog.
One more question is where to add the css file specific to that dialog box html content?

Thank you.
Regards,
Himangshu
mihai_coanda
Posts: 5

Re: Creating a custom Dialog for Link

Fri Jan 12, 2018 11:31 am

Hello,

The easiest approach to style your HTML would be to use inline styling using the element's "style" attribute.

If you want to have the CSS in a separate file, to load a CSS file from your framework you should add a .css file in your framework's web folder and load it from your framework.js code like :

Code: Select all

sync.util.loadCSSFile(
sync.ext.Registry.extensionURL + "my-custom.css");


Regards,
Michael.
pramanikhimangshu
Posts: 17

Re: Creating a custom Dialog for Link

Mon Jan 15, 2018 10:41 am

Hi Michael,

Thank you for the quick reply and it was very helpful.
I am currently working on the customization of external links in oxygen web author.
I currently used sync.api.dom.Element to get the href of selection element is already a link or not, but if it is a link then I should change the existing href attribute and not re encapsulate with ro.sync.ecss.extensions.commons.operations.SurroundWithFragmentOperation, my question is how I can set value to an attribute of an element.

Thank you.
Regards,
Himangshu.
mihai_coanda
Posts: 5

Re: Creating a custom Dialog for Link

Tue Jan 16, 2018 2:44 pm

Hello,

You can use the ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation operation.

Regards,
Mihai
pramanikhimangshu
Posts: 17

Re: Creating a custom Dialog for Link

Wed Jan 17, 2018 9:16 am

Hello,

Thank you very much for the help, now I can change the attributes of the existing links. :D

1>I would like to ask is there any JS-Api methods to check for a particular kind of an attribute from all the tags present in the document i.e I need to find all the ELEMENTS from the dita document which have that particular attribute presents in the tags.

Like: <AnyTag particularAttr></AnyTag>

I want to get the array of elements which have particularAttr present.
Please suggest me a way to do this operation.
2>How can stop a dialog from closing after click of Ok and Cancel button configuration

Thank you.
Regards,
Himangshu.
mihaela
Posts: 188

Re: Creating a custom Dialog for Link

Thu Jan 18, 2018 12:28 pm

Hi,

1> Please see our questions and answers about this in the "Finding a particular attribute of tags within the document" topic.
From what I understand, it has the same subject.

2> You can call the preventDefault function on the event:

Code: Select all

e.preventDefault();


Best regards,
Mihaela
Mihaela Calotescu
http://www.oxygenxml.com
pramanikhimangshu
Posts: 17

Re: Creating a custom Dialog for Link

Fri Jan 19, 2018 7:48 am

HI

Thank you for the previous reply to stop the default propagation.
I want to use the authoraccess variable in JS.
In documentation it is stated : It must have a function called doOperation()
I tried to put a doOperation function in the framework.js file, but I cannot access the authoraccess.
Could you please guide me with this.

Thank you.
Regards,
Himangshu.
pramanikhimangshu
Posts: 17

Re: Creating a custom Dialog for Link

Fri Jan 19, 2018 12:52 pm

mihaela wrote:Hi,

1> Please see our questions and answers about this in the "Finding a particular attribute of tags within the document" topic.
From what I understand, it has the same subject.

2> You can call the preventDefault function on the event:

Code: Select all

e.preventDefault();


Best regards,
Mihaela

Code: Select all

function buttonClick = function(e)
{
   e.preventDefault();
}
this.dialog.onSelect(buttonClick);

I am getting :
Uncaught TypeError: e.preventDefault is not a function
at URNDialog.buttonClick (<anonymous>:1029:7)
at sync.view.ApiDialog.<anonymous> (workspace-c71778b94e.js:1231)
at sync.view.Dialog.goog.events.EventTarget.fireListeners (workspace-c71778b94e.js:234)
at Function.goog.events.EventTarget.dispatchEventInternal_ (workspace-c71778b94e.js:236)
at sync.view.Dialog.goog.events.EventTarget.dispatchEvent (workspace-c71778b94e.js:231)
at sync.view.Dialog.goog.ui.Dialog.onButtonClick_ (workspace-c71778b94e.js:1138)
at Object.goog.events.fireListener (workspace-c71778b94e.js:224)
at HTMLDivElement.goog.events.handleBrowserEvent_ (workspace-c71778b94e.js:227)
at HTMLDivElement.b (workspace-c71778b94e.js:216)

The type of e is string and not event.
Please help me with this.

Thank you.
Regards,
Himangshu
cristi_talau
Posts: 162

Re: Creating a custom Dialog for Link

Fri Jan 19, 2018 1:16 pm

Hello,

The signature of the callback is documented here: https://www.oxygenxml.com/maven/com/oxy ... ctCallback . Basically, the first argument is the key of the pressed button and the event is the second.

Best,
Cristian
pramanikhimangshu
Posts: 17

Re: Creating a custom Dialog for Link

Fri Jan 19, 2018 1:28 pm

pramanikhimangshu wrote:HI

Thank you for the previous reply to stop the default propagation.
I want to use the authoraccess variable in JS.
In documentation it is stated : It must have a function called doOperation()
I tried to put a doOperation function in the framework.js file, but I cannot access the authoraccess.
Could you please guide me with this.

Thank you.
Regards,
Himangshu.


Hello,
Thanks for the reply.
Can I use authoraccess in framework.js?
How would I do this, please guide me with this.
Regards,
Himangshu
cristi_talau
Posts: 162

Re: Creating a custom Dialog for Link

Fri Jan 19, 2018 2:31 pm

Hello,

The ro.sync.ecss.extensions.api.AuthorAccess API is a server-side API. You can implement AuthorOperation-s that run on the server using JS, but the code needs to be placed in a different file. For mode information you can take a look at this sample code: https://github.com/oxygenxml/javascript ... operations .

Best,
Cristian
pramanikhimangshu
Posts: 17

Re: Creating a custom Dialog for Link

Mon Jan 22, 2018 9:07 am

Hi,

Thank you for the reply it was helpful.
I want to know two more things:

1> Can we use the blue notification box that web author shows during logging in our custom framework using JS-API, if we can can you please tell process, so that displaying user message/notification stay aligned to web author styles.
2> I want my custom dialog box to appear only in certain areas of the document in rest places it should not be appearing. For example I created a Link dialog box using JS, I don't want it to appear when user right clicks selecting the title tag, as we should not allow user to insert link in Title or the root tag like concept, reference .etc. To achieve this use case what is the way forward is there any rule I can place or I have to manually check for all the Tag names that is selected in JS and selectively display and hide the dialog box. Please guide me with this use case.

Thank you.
Regards,
Himangshu.
cristi_talau
Posts: 162

Re: Creating a custom Dialog for Link

Mon Jan 22, 2018 2:53 pm

Hello,

First of all, I would suggest starting new Forum posts for each of your problems.

Regarding your questions:
1) We have such an API: workspace.getNotificationManager().showInfo("message");
2) Currently, the only feasible way is to list those tags manually. You can take a look at all the possible parent elements here: http://docs.oasis-open.org/dita/v1.2/os ... .html#xref .

Best,
Cristian

Return to “SDK-API, Frameworks - Document Types”

Who is online

Users browsing this forum: No registered users and 1 guest