Skip to main content

Form beautification in Process Cloud Services (PCS)

 

Using Custom CSS to make the form look cooler.

Introduction

In this blog I will be explaining about creating custom CSS to make the pcs form look better.

Main Article

In this post let’s make the form look more appealing.

In the below screenshot as you can observe the initial form looks old school and doesn’t look much appealing.


And the beautify options provided by the PCS by default are very basic.

We can overcome this by having a custom CSS of our own and make the form look more appealing to the customer.

Follow the below steps in order:

1.     Go to the form you have developed.

2.     Under form properties go to form properties



3.     Click on the upload

4.     Select the custom CSS file you had developed.



5.     The form gets change to below screen shot



 

As you could see we had changed added sample logos to the fields which is not possible by default and changed the background color as well.

 

The CSS code used above:

input[name=items] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') ;

    background-size: 10px;

           background-repeat: no-repeat;

}

 

input[name=name] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://toppng.com/uploads/preview/mail-icon-11549825367za0blj7xnt.png') ;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

input[name=quoteDate] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

 

input[name=reviewNeeded] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://www.freeiconspng.com/thumbs/review-icon-png/review-icon-13.png') ;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

 

input[name=validateDate] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

input[name=amount] {

  width: 80%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border:2px solid DodgerBlue;

  background-image: url('https://www.freepnglogos.com/uploads/dollar-sign-png/dollar-sign-dollar-symbol-signs-icons-1.png') ;

    background-size: 20px;

           background-repeat: no-repeat;

}

 

 

body{

          background-colour: #edf033;

}

 

 

 

Hope you all will utilize the Advanced CSS option and create more appealing forms in future.


-Preetham Konjeti


Labels:

Comments

Post a Comment

Popular posts from this blog

Convert App based Integration to Scheduled Integration without wrapper in OICS

we all know that converting a scheduler integration to REST is quite easy , where as the reverse is not possible and the only way to achieve it is through creating a wrapper scheduler integration and invoking the trigger one as child from there. But there is another way through which we can achieve the direct conversion. For that please refer to below example. Note : Every step mentioned has to be done very carefully Create Scheduler Integration. I’ve created a base one in which it invokes a SOAP service.  I’ve created a small trigger integration which I’m going to change to scheduler without any wrapper. Please follow the below steps to convert rest based to scheduler:     1)    Export the integration.     2) Rename the iar file to zip.     3) Now unzip the file.     4)    Compare the properties files of both scheduler and rest based integration and make the changes to rest based as per the scheduler integration After ...
2 comments
Read more

ChatGpt X Oracle Digital Assistant Integration

  Introduction In this article I will be explaining about integrating the ChatGpt with Oracle Digital Assistant. NOTE : This is not a suggestion to have ChatGPT in your ODA, this article is just to showcase the flexibility of the ODA to easily integrate with anything. Main article ChatGPT ChatGPT is an AI language model developed by OpenAI, capable of processing natural language input from users and generating coherent and relevant responses. It has been trained on an enormous corpus of text data using unsupervised learning, allowing it to generate responses that are not just grammatically correct, but also contextually appropriate and engaging. ChatGPT is particularly useful in scenarios where there is a need for rapid and accurate responses to user queries, such as in customer service or personal assistants. However, it may struggle to generate appropriate responses in certain situations and may not be suitable for scenarios requiring a high degree of personalization or...
2 comments
Read more

Wait for Synchronous Integration in OICS

   Introduction: Wait is the most common thing we use to slow down the process at any given point of time, but this wait action is by default disabled for synchronous integrations. Main Article: Create a JavaScript ( syncWait  let  ) with the below Code: function syncWait(waitTimeinmillisec) {   const begin = Date.now();   while ((Date.now() - begin) < waitTimeinmillisec){   }   return waitTimeinmillisec; } now call this JavaScript in your synchronous Integration with the seconds you want to halt your integration * 1000. Call this JavaScript in places you need in your synchronous Integration. That's it you had overcome the synchronous Integration Limitation. Example: -Preetham Konjeti.
Post a Comment
Read more