Workflow Customization White Paper

[rakshit_doshi]

Hi All,

I am very much new to Workflow application development.

I know the basic to make the workflow application but i am very much new in customization thing.

I tried doing a thing or two in custom.js and even the workflow.html file but every time i rebuilt it it goes away and i am not able to see any results.

Can anyone show up with a white paper explaining a very simple scenario and how to customize it using which all files to pick for customization

Any help will be very much appreciated

[Former Member]

Hi Rakshit!

Unfortunately you cannot customize the .html files. You should do this in your Custom.js or Stylesheets.css. These files are not modified between rebuilds of your Workflow.

Additionally, you can create new .js or .css files in your /html folder. They are included in the *.html next time you rebuild your Workflow. Note that these includes are sorted alphabetically.

Sybook link:

http://infocenter.sybase.com/help/index.jsp?docset=/com.sybase.infocenter.pubs.docset-SUP-2.1.2/doc/...

Hope it helps,

Bruno

PS: IMHO, the fact that I cannot modify the html structure directly is a bad-design approach. Although it is possible, creating a new one manually may be a good solution, but it is not recommend  by Sybase.

[rakshit_doshi]

Hi Bruno,

I just tried to change the colour of the button so picked up the workflow look and feel.html file and then gave a class name to it and created a css file and included the <link> path for it in the same html file and defined a css rule in the created file and when rebuilt again saw it vanish.

Do you have any sample workflow app in which you can show a whitepaper kind of thing and explain a little bit with screenshots.

Helps is very much appreciated.

Thanks

[Former Member]

Hi Rakshit,

I do not have any sample code here. What you're doing wrong is modifying the HTML file itself. These changes are lost once you rebuild your Workflow.

What I'd suggest is to open the generated HTML in Chrome Browser, right click the button, and choose "Inspect element".

The structure of HTML button should be something like this:

<a href="javascript:void(0)" id="DecisaoScreenDivAprovar" name="Aprovar" onclick="menuItemCallbackDecisaoAprovar();" class="ui-btn-right ui-btn ui-btn-corner-all ui-shadow ui-btn-up-d" data-theme="d" defaultwidth="110" style="width: 110px; ">
     <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
          <span class="ui-btn-text"> Aprovar</span>
     </span>
</a>

Note the "id" property of <a> element (in bold). Them, you should add a css rule like the one bellow to your Stylesheets.css:

#DecisaoScreenDivAprovar {
     background-color: red;
}

Hope it helps.

Bruno

[Dan_vL]

Here is a link to a sample for 2.1 ESD #2.  It also links to many more samples.  Hopefully they will help.

https://cw.sdn.sap.com/cw/docs/DOC-148193

As a general note the HTML is regenerated each time you run the packaging wizard unless you uncheck update generated code.  The recommended approach is to add customizations to Custom.js or the css files rather than the HTML.

[Former Member]

hi rakshit,

do u want workflow customize configuration or customize workflow building...can u tell clearly what u need in workflow.

Thanks.

[rakshit_doshi]

Hi Naresh,

I want to know the steps to customize the workflow applications.

For look and feel which css file to edit and for additional functionalities which javascript file to touch