cancel
Showing results for 
Search instead for 
Did you mean: 

How to skip / remove the Create popup from SAPUI5 worklist?

AndreasMuno
Product and Topic Expert
Product and Topic Expert
0 Kudos
197

Hi fellow coders, 

in SAP BTP BAS a CAP app is emerging beautifully helped by templates like the SAPUI5 worklist. The entity underneath that worklist has a key ID defined as integer, and a custom s_id, defined as a string. Anyway, for these two IDs, I have developed a counter that automatically creates new numbers for new instances of the object. On the object page these counters work properly. 

The worklist has a Create button. When the user clicks it, they are getting a popup titled "Create" with an empty field, the object ID, apparently to be filled manually.

I'd like to skip that popup. How might I achieve that, given I had used the worklist template for my UI?    

---

Here are a few screenshots to illustrate what I am dealing with:

AndreasMuno_0-1722984226282.png

Popup "Create". 

AndreasMuno_1-1722984303906.png

Create button in worklist.

When leaving the ID field empty and continuing, the object detail screen shows, still without S-ID:

AndreasMuno_2-1722984649553.png

Object detail screen

Dummy entries for title, and text. Selection for Classification:  

AndreasMuno_3-1722984811145.png

After "Create" the S-ID gets created. 

AndreasMuno_4-1722985007179.png

I'd like to have the ID and S-ID created ideally upon pressing the Create button on the worklist, not after filling out the mandatory fields on the object details. How might I achieve that?

The blog_service.js code has the numbering routine, but apparently for the object details:

const cds = require('@sap/cds');

module.exports = cds.service.impl(async function() {
    const { Blogs } = this.entities;

    // Log to ensure the service impl is being initialized
    console.log('Service implementation initialized for BlogService');

    this.before('CREATE', 'Blogs', async (req) => {
        console.log('Before create hook triggered'); // Log when the hook is triggered
        console.log('Request Data:', req.data); // Log the incoming request data

        const tx = cds.transaction(req);
        const lastEntry = await tx.run(
          SELECT.one.from(Blogs).orderBy('ID desc').limit(1)
        );

        console.log('Last ID entry:', lastEntry.ID);

        // Generate the next ID
        let nextNumberId = 1;
        if (lastEntry && lastEntry.ID) {
            const match = lastEntry.ID;
            if (match) {
                nextNumberId = match + 1;
            }
        }
        console.log('Generated ID:', nextNumberId);
        req.data.ID = nextNumberId;

        // Generate the next S-ID
        let nextNumber = 1;
        if (lastEntry && lastEntry.s_id) {
          const match = lastEntry.s_id.match(/S(\d{4})/);
          console.log("Last S-ID's numeral: ", match[1]);
          if (match) {
            nextNumber = parseInt(match[1], 10) + 1;
          }
        }
   
        const nextS_ID = `S${nextNumber.toString().padStart(4, '0')}`;
        console.log('Generated S-ID:', nextS_ID);

        req.data.s_id = nextS_ID;
      });

});

 

 

 

 

View Entire Topic
Willem_Pardaens
Product and Topic Expert
Product and Topic Expert

The easiest approach would be to let the framework handle ID generation by using a UUID instead of integer. You can still generate an 's_id' afterwards if you want a 'human readable ID' on top of the technical ID. See CAP documentation here: https://cap.cloud.sap/docs/guides/domain-modeling#primary-keys 

To your scenario of using manual integer ID, the popup is required because your object gets created in draft before the user can add details and 'create' the object. When clicking that second 'create', the object is actually already created, so required an ID.

You can remove the popup and generate the ID by providing a default values function (NewAction), see here: https://ui5.sap.com/#/topic/11ff444f82e14eb3a2e8eca0065a5055. This NewAction should point to a bound action returning a created instance, e.g.:

this.on(Blogs.actions.getDefaultValues, async req => {
    return await this.send({
        //@ts-ignore
        query: INSERT.into(Blogs).entries([{ID: 123}]),
        event: "NEW"
    })
})