CEP scripting : How to apply paragraph styles to data from JSON

New Here ,
Mar 05, 2021 Mar 05, 2021

Copy link to clipboard

Copied

Hi there, 

 

Could anyone please help me out what to use in CEP scripting to be able to push text with styles defined in JSON data object to indesign frame so that they would keep they paragraph styles..

Hope this gives the idea. The plan is to have data that is retrieved in JSON pushed to InDesign frame. if there is Text frame and I have defined parahraph styles, then I would expect html wrapped in <b> tags, to be pushed to frame so that text ends up in bold.


Thank you very much for your help.
---

<b>

<i>

<h4> 

 

TOPICS
How to, Scripting

Views

155

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Mar 05, 2021 Mar 05, 2021

Copy link to clipboard

Copied

Hi there,

 

The really first thing to understand is that there is no such things as bold in InDesign as in html. But I guess you already got that one already. So if you want to put "bold" tagged content and see it bolded, you have to let InDesign know what to do with your bold text.

 

I don't think there is an absolute best of all solutions. Basically, there are many :

- Turn your text into indesign tagged text format (some xml like syntax that ties content and formatting [styles])

- Convert your text into icml forma for injection

- Convert your text in idms (quite similar to icml)

- Use XML import

 

Given the proximity between HTML and XML (I know HTML is just a limited set of XML), and the native ability of InDesign to importXML and deal with styles, I will demonstrate this one.

 

I will let you work on the CEP side but basically the idea is to write down the xml file (based on your json data). Note that you can write file onto disk through your CEP panel with

window.cep.fs.writeFile

 

Then you can simply import this XML file into your document with

doc.importXML(xmlFile);

 

The magic is that you don't have to worry much about formatting as everything is UI manageable in InDesign. Just have a look at either the tags panel or the styles panel :

 

Capture-d-e-cran-2021-03-05-a-23-28-19

 

All you have left to do is to associate tags and styles

 association2.png

 

And the magic part is that you don't have to worry much about styling. Everytime you import xml tagged content, the text gets correctly styled.

 result.png

 

And you can go further and further by creating the styles if not present, creating association rules if not present, untag content post import if needed…

 

I didn't get into much details but I hope you got the point.

 

HTH

 

Loic

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

Thanks Loic, thansk a lot for your response. After reading your response, I think I might have passed my idea wrong.

 

My goal is to have a plugin, that retrieves data from database push the data to an  active frame of the document.
Plugin lists out the data in a JSON format, data itself is say (don't mind the format nor escaping etc., not relevant in our case) something like this..

 

ind5FA3_0-1615192350423.png

 

I have defined paragraph styles and character styles. Now when the plugin retrieves data from the database and JSON is retrieved I will mark text frame active and initiate pushing data to it with class "Paragraph-style-heading-1. I expect paragraph-style with name "Paragraph-style-heading-1" to be applied to the text pushed to the frame.

I expect no XML conversion is needed since the content can already be pushed  to the frame, but there is something that just does not meet the eye. How does one apply paragraph style to a selected frame. Rookie as I am, cannot figure that one out.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

XML was convenient as you didnt had much to code but if you don't want to go that way and keep in mind the connexion between declarative tags and applied styling, you may want to consider tagged text:

 

ftp://buerliag.ch/pub/Documentation/Adobe/Tagged%20Text.pdf

 

Having to match the exact syntax doesn't look hard but i am having hard times at saving the txt file with the appropriate encoding. But maybe you will get something out of it.

Another option is icml although a bit overkill.

 

Eventually you can parse the content, append text to story and apply styles on the fly but that looks like an ugly and time consuming operation.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Valorous Hero ,
Mar 09, 2021 Mar 09, 2021

Copy link to clipboard

Copied

LATEST

Ok, so here it is with tagged text content. The required encoding seems to be "UTF-16BE" but as this doesn't seem to be settable through window.cep.writeFile methods (encodings sets are limited), the writing of the file can be done in the extendscript level.

For example, passing through your "html" content to extendscript :

csInterface.evalScript('$._ISDN.importData('+JSON.stringify(theDataString)+')', function(res){
   alert(res);
})

Now you need to process data through ExtendScript like for example:

$._ISDN = {
    importData:function(data){

    //Let's prepare our tagged text syntax
    var txt = "<UNICODE-MAC>";
    txt+="\u000A";
    txt+=data.title.replace(/<p class="(.+)">(.+)<\/p>/, "<ParaStyle:$1>$2")
    txt+="\u000A";
    txt+= data.body.replace(/<b>([^<]+)<\/b>/g, "<CharStyle:boldy>$1<CharStyle:>");

    //Let's write down our tagged text file
    var txtFilePath = Folder.temp+"/temp.txt";
    var txtFile = new File (txtFilePath);
    //UTF-16BE encoding is required for tagged text file to be properly parsed.
    txtFile.encoding = "UTF-16BE";
    txtFile.open("w");
    txtFile.write(txt);
    txtFile.close();

     //Let's adda textframe and place tagged text file
     //Warning : beware of taking context into account (i.e. not running this script as is)
    var tf = app.activeDocument.textFrames.add({geometricBounds:[5,5,100,50]});
    tf.insertionPoints[0].place(txtFile);
    
    //let's get rid of tagged text file
    txtFile.remove();
    
    }   
}

 

WARNING : as is, the code will yell an alert if the styles are not defined. Defining styles in the tagged text file syntax would discard this issue.

 

And then your file is finally imported :

Capture d’écran 2021-03-09 à 21.25.24.png

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines