Overview
You will learn
- How to turn on synced option tabs with the
syncTabs: autofrontmatter flag - How to group OPTION blocks into a synchronized set with the
sync=<group>qualifier - How a reader’s choice in one step carries to every other step automatically
Prerequisites
- Basic familiarity with the tutorial OPTION block syntax (see v2-example-tutorial)
- Basic familiarity with CAP
Steps
Pick your runtime and initialize a new CAP project.
Run npm init -y && npm add @sap/cds-dk to initialize a Node.js CAP project.
Then scaffold the project structure:
cds init my-cap-app
cd my-cap-app
npm installRun mvn archetype:generate to initialize a Java CAP project:
mvn archetype:generate \
-DarchetypeGroupId=com.sap.cds \
-DarchetypeArtifactId=com.sap.cds.archetype \
-DarchetypeVersion=RELEASEFollow the prompts to set your project name and package.
Define a simple CDS service, then add the runtime-specific handler.
Create srv/hello-service.cds:
service HelloService {
function greet(name : String) returns String;
}Then create srv/hello-service.js:
module.exports = (srv) => {
srv.on('greet', ({ data: { name } }) => `Hello, ${name}!`)
}Create Application.java in your main source folder:
@Component
public class HelloServiceHandler implements EventHandler {
@On(event = "greet", service = "HelloService")
public void onGreet(CdsCreateEventContext ctx) {
String name = ctx.getData().get("name").toString();
ctx.setResult("Hello, " + name + "!");
}
}Start the server and try the endpoint.
Run the development server:
cds watchOpen a browser or use curl to test:
curl "http://localhost:4004/hello/greet(name='World')"Run the Spring Boot server:
mvn spring-boot:runOpen a browser or use curl to test:
curl "http://localhost:8080/hello/greet(name='World')"You have now tried synced option tabs. The picker bar at the top of the page remembers your runtime choice and applies it to every group automatically — each OPTION block carrying the same sync=runtime qualifier switches together.
- Read the CAP documentation for more
- Explore the other directive-syntax samples in this repository
Resources
Discussion
Share feedback on this tutorial or join the conversation in SAP Community.