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

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

Easy Chatbot/Digital Assistant Creation and Integration into VBCS

  Introduction : In this blog I will be explaining about creating a chatbot and integrating with your VBCS application. Main Article: Chatbots are the coolest things that everyone would love to have in their application. Let’s start by building a basic chatbot which suggests you a place to visit in India based on your food preferences. STEP1 : ·        Go to the skills section of your digital assistant. ·        click on the Add Intent and rename it to ‘suggestPlaces’ and then go to utterances section of and provide your input. ·        Basically, utterances are the initial conversations that would be started by the humans in a chatbot. once you are done with providing your utterances. click on the train with ML at the top of the page and wait till it gets completed.   STEP2 : ·        Go to the entity section and create an entity (type: valueli...
Post a Comment
Read more