Visual Builder

Get Involved. Join the Conversation.

Topic

    Kmuralidharan1992
    Custom code in VBCS?
    Topic posted December 13, 2017 by Kmuralidharan1992 Bronze Medal: 1,250+ Points, last edited December 15, 2017 
    320 Views, 7 Comments
    Title:
    Custom code in VBCS?
    Summary:
    Custom code in VBCS?
    Content:

    Hi

    How to get business object data's in vbcs page using custom code?

    For example i have a product details in Business object that contains Product name, ID, price etc...

    I need to show that data's in an vbcs page using custom code. Is this possible??

    Does vbcs support javascript??

    Comment

     

    • Kapil Kapani

      You can drag the custom code component on the page.

      If you would like get the handle of data of the business object where in the page is bound to the business object - like Create page of a business object or Edit page of a business object,

      Get the handle of the archetype on the page

      var archetype = this.pageViewModel.Archetypes.<YourEntityDetailArchetype>;

      //Get the handle of the current entity detail record.

      var record = archetype.getRecord();

      //Alert

      alert(record.getValue(<Your Attribute Id>));

      If the current page is not related to the business object you want to query, then you will have to issue a read call to the business object and get the data using json response.

      require([ 'operation/js/api/Conditions', 'operation/js/api/Operator' ],

      function(Conditions, Operator)

      {

      var firstName = employee.getProperty('firstName'); //business obj attribute

      var employee = Abcs.Entities().findById('EmployeeDetails'); //business obj id

      var condition = Conditions.SIMPLE(firstName, Operator.EQUALS, 'Martin');

      var operation = Abcs.Operations().read({ entity: employee, condition: condition }); 

      operation.perform().then(function (readOperationResult) {

         if (readOperationResult.isSuccess()) {

              readOperationResult.getData().forEach(function (record) {

              var attribute = record['<Your Attribute Id>'];

              alert(attribute);

           }

      });

      });

    • Kmuralidharan1992

      Hi Kapil Kapani

      I have tried above code in my drag and droped costom code. My BO name is Items, and i have fields name, price.

      var archetype = this.pageViewModel.Archetypes.ItemsEntityDetailArchetype;

      var record = archetype.getRecord();

      alert(record.getValue('price'));

      But the alert message shows us undefined.

      pastedImage_3.png

      Where do i have to write this code?? I have written that code in Model. Is that correct.

    • Kapil Kapani

      The place where you have coded is right.

      Are you getting a valid record ? (You can do an alert of record or console.log to check if the object is undefined or valid)

      If you are getting a valid record, then may be the attribute "price" is an issue. And you might need to key in the attribute's id shown in the BO editor.

      If you are getting an invalid record, then either the Archetype is incorrect (ItemsEntityDetailArchetype). You can see the id of the arcchetype in the generated model in the custom code component

      pastedImage_1.png

      If your archetype is also right, then the only thing to check is are you in the Create or Edit page of the Items business object. The code only works if you are in the create, edit page of your business object. If you have the underlying page as a landing page it would not.

    • Shay Shmeltzer

      Can you give a bit more details about your use case for injecting custom code?

      When do you want the code to be invoked? What is the code suppose to do?

    • Kmuralidharan1992

      Hi

      I'm doing Poc in vbcs. I'm simply developing a pages that shows product images and product names with some other informations.

      I've created business objects (Items) that has Name, and Price fields with some datas.

      My first page shows images of products.

      pastedImage_5.png

      In my second page i used custom code to create page designs using HTML and css.

      pastedImage_6.png

      In this page i want to show the name and the price of an product that has to be derived from BO(Items), based on condition for example

      like if i choose first product in first page then based on that products id it must show that specific products name and price in my second page

      likewise for other products too.

      Is this possible??

      And also how to navigate to other pages using custom code HTML?

      I have designed button using HTML code while clicking that button in page it should navigate to target page.

      Thanks in advance.

    • Shay Shmeltzer

      This blog shows how to figure out and access the value of a business object associated with a page:

      https://blogs.oracle.com/shay/using-an-on-field-value-changes-event-in-oracle-visual-builder-cloud-service

      In general you'll need to make sure that you are using the right page type associated with the right object (edit page for the specific object) to get this working properly.

      In terms of getting the right product onto the page - this is a matter of passing a parameter on the URL with the id of the record - this video shows an example:

      https://youtu.be/HyGJ2paYrcw?list=PLSKf-atSzZejmyC9f_t3JDOr5MpO1Sm6C&t=147

      So your landing/list page needs to call the "edit" page passing the id on the URL which will get the right record to show up.